[JS] automatyczne przypisywanie zdazen do tabeli

0

witam
potrzebuje zrobic podswietlanie wierszy tabeli przy najechaniu na nia kursorem myszy

na kazdy wiersz ustawiam onmouseover i onmouseout w taki sposob:
<tr onMouseOver="kolor(this);" onMouseOut="kolor(this);">

moje pytanie:
zakladajac ze mam bardzo duzo wierszy i chcialbym zaoszczedzic na kodzie
chodzi mi o przypisanie wszystkim TR zdazenia onmouseover i onmouseout z kodu JS
nie wpisujac ich w <TR ................>
czy istnieje taka mozliwosc?

0 
function addEvent( obj, type, fn )
{
  if (obj.addEventListener)
    obj.addEventListener( type, fn, false );
  else if (obj.attachEvent)
  {
    obj["e"+type+fn] = fn;
    obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
    obj.attachEvent( "on"+type, obj[type+fn] );
  }
}

//dla wszystkich tr wywolujesz:
addEvent(tr,'mouseover',kolor);
addEvent(tr,'mouseout',kolor);

Tylko funkcja kolor moze wymagac paru zmian, bo jako parametr dostaje event:

function kolor(e) {
	var el;
	if (window.event && window.event.srcElement) { el = window.event.srcElement; }
	if (e && e.target) { el = e.target; }
	if (!el) { return; }
// tu el zawiera element ktory zlapal hovera (moze to byc td, wiec musisz wtedy przejsc do parenta)
0
nav napisał(a)

Tylko funkcja kolor moze wymagac paru zmian, bo jako parametr dostaje event:

function kolor(e) {
	var el;
	if (window.event && window.event.srcElement) { el = window.event.srcElement; }
	if (e && e.target) { el = e.target; }
	if (!el) { return; }
// tu el zawiera element ktory zlapal hovera (moze to byc td, wiec musisz wtedy przejsc do parenta)

haha śmieszny jesteś
korzystasz z funkcji która wygrała konkurs w3c a nawet nie wiesz po co to robisz
w konkursie chodziło o funkcję uniwersalną której główną cechą jest ... zachowywanie elementu "this"
innymi słowy nic nie trzeba modyfikować, autor tej funkcji zadbał aby pod "this" mieć element który wywołał zdarzenie w każdej przeglądarce (z IE włącznie) czy jak to ty nazywasz "złapał hovera"
a żeby sobie nie gmatwać, polecam zrobić dwie osobne funkcje, dla mouseover i mouseout które powinny wyglądać np tak:

function kolorOn(e)
{
    this.style.backgroundColor = 'yellow';
}

function kolorOff(e)
{
    this.style.backgroundColor = 'white';
}

żadnego kombinowania z wyciąganiem elementu ze zdarzenia !

0

a i w sumie mam wrażenie że skoro autor zadał takie pytanie to nie za bardzo wie jak "wywołać coś dla każdego elementu tr", chociaż mogę się mylić - więc proszę aby autor się na mnie nie złościł jeśli mu teraz podaję oczywisty dla niego kod:

for(var lista = document.getElementsByTagName('tr'), i = lista.length - 1; i >= 0; i --)
{
    addEvent(lista[i],'mouseover',kolorOn);
    addEvent(lista[i],'mouseout',kolorOff);
}
0
fdgdfg napisał(a)
for(var lista = document.getElementsByTagName('tr'), i = lista.length - 1; i >= 0; i --)
{
    addEvent(lista[i],'mouseover',kolorOn);
    addEvent(lista[i],'mouseout',kolorOff);
}

wlasnie o to mi chodzilo :)
aby wszystkim tr przypisac te zdazenia z kodu js
dzieki za zainteresowanie

0

mam wiec taki kod w js:

   function doadaj()
    {
     for(var lista = document.getElementsByTagName('tr'), i = lista.length - 1; i >= 0; i --)
      {
       addEvent(lista[i], 'mouseover', kolor(this));
       addEvent(lista[i], 'mouseout', kolor(this));
      }
     }
   function kolor(obj)
    {
     if (obj.bgColor == '#e2eef5')
     obj.bgColor = '#ffffff';
     else obj.bgColor = '#e2eef5';
    }

gdzie funkcje dodaj wywoluje w body onload
mimo to wywskakuje mi - oczekiwano ort!
pewnie to this przy dodawaniu zdazenia miesza
prosze o pomoc

0
  1. przekleiłeś funkcję addEvent ?
  2. jasne że miesza, parametrem do funkcji addEvent jest funkcja, zaś kolor(this) to nie funkcja a wartość zwracana przez tą funkcję, więc byś musiał w funkcji zwracać funkcję, co nie nie zbyt normalne
    usuń (this), zaś funkcja kolor już nie przyjmuje parametru (obj), tylko (event) z którego akurat nie masz potrzeby korzystać
    czyli usuń z parametrów funkcji kolor "obj" i wszystkie wystąpienia "obj" zamień na "this"
0
gdfgdfg napisał(a)

usuń (this), zaś funkcja kolor już nie przyjmuje parametru (obj), tylko (event) z którego akurat nie masz potrzeby korzystać
czyli usuń z parametrów funkcji kolor "obj" i wszystkie wystąpienia "obj" zamień na "this"

mam taki kod:

   function doadaj()
    {
     for(var lista = document.getElementsByTagName('tr'), i = lista.length - 1; i >= 0; i --)
      {
       addEvent(lista[i], 'mouseover', kolor());
       addEvent(lista[i], 'mouseout', kolor());
      }
     }
   function kolor()
    {
     if (this.bgColor == '#e2eef5')
     this.bgColor = '#ffffff';
     else this.bgColor = '#e2eef5';
    }

i dalej nie dziala

0

kurde bez tych nawiasów !
samo "kolor" ! żadne kolor(), kolor(this), kolor(obj) czy kolor(trąbka) bo to nie są funkcje tylko wartości zwracane przez funkcję kolor z parametrem jakimś !

dobra, masz gotowy kod:

function addEvent( obj, type, fn )
{
  if (obj.addEventListener)
    obj.addEventListener( type, fn, false );
  else if (obj.attachEvent)
  {
    obj["e"+type+fn] = fn;
    obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
    obj.attachEvent( "on"+type, obj[type+fn] );
  }
}

function dodaj()
{
   for(var lista = document.getElementsByTagName('tr'), i = lista.length - 1; i >= 0; i --)
   {
      addEvent(lista[i], 'mouseover', kolor);
      addEvent(lista[i], 'mouseout', kolor);
   }
}

function kolor(e)
{
   if (this.bgColor == '#e2eef5')
   this.bgColor = '#ffffff';
   else this.bgColor = '#e2eef5';
}

...

<body onload="dodaj()">

a tu masz kod jak ja bym to napisał:

function addEvent( obj, type, fn )
{
  if (obj.addEventListener)
    obj.addEventListener( type, fn, false );
  else if (obj.attachEvent)
  {
    obj["e"+type+fn] = fn;
    obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
    obj.attachEvent( "on"+type, obj[type+fn] );
  }
}

addEvent(window, 'load', function()
{
   for(var lista = document.getElementsByTagName('tr'), i = lista.length - 1; i >= 0; i --)
   {
      addEvent(lista[i], 'mouseover', function()
        {
           this.style.backgroundColor = '#e2eef5';
        }
      );
      addEvent(lista[i], 'mouseout', function()
        {
           this.style.backgroundColor = '#ffffff';
        }
      );
   }
}
);
0

albo bardziej oldschoolowo:

onload = function()
{
   for(var lista = document.getElementsByTagName('tr'), i = lista.length - 1; i >= 0; i --)
   {
      lista[i].onmouseover = function()
      {
         this.style.backgroundColor = '#e2eef5';
      }
      lista[i].onmouseout = function()
      {
         this.style.backgroundColor = 'white';
      }
   }
}

tylko że tutaj nie masz możliwości dopisania już niczego do "onload" ani do "mouseover" i "...out" tych wierszy

0

dzieki

0 
onload = function()
{
   for(var lista = document.getElementsByTagName('tr'), i = lista.length - 1; i >= 0; i --)
   {
      lista[i].onmouseover = function()
      {
         this.style.backgroundColor = '#e2eef5';
      }
      lista[i].onmouseout = function()
      {
         this.style.backgroundColor = 'white';
      }
   }
}

dobra a jak w tabeli mam pierwszy wiers w ktorym sa opisy pozostalych i ma on id=opis to jak wykluczyc go z podswietlenia?

0

cos takiego nie dziala
if (!document.getElementById('opis')) this.style.backgroundColor = '#e2eef5';

0

if (this.id!='opis')

1 użytkowników online, w tym zalogowanych: 0, gości: 1