WN - Byt class på tabellrad vid musklick?

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Byt class på tabellrad vid musklick? (https://www.wn.se/forum/showthread.php?t=9949)

Martin

2005-09-21 14:53

Hejsan!

Jag har en lista med saker som listas ur en databas, antalet rader (TR) kan vara olika från gång till gång.

Kod:

<TABLE>

<TR><TD class=list></TD></TR>

<TR><TD class=list></TD></TR>

<TR><TD class=list></TD></TR>

</TABLE>

Vill få följande att hända:
När man klickar på en rad (TR) så ska denna rad byta bakgrund (eller egentligen class från "list" till "list_sel"). När man sedan klickar på en annan rad ska den förra raden byta tillbaka till "list" igen.

Någon som har en lösning på problemet, har suttit och klurat med javascript. Lyckas byta klass men sedan när man klickar på en annan rad vet jag inte hur jag får bort den förra raden.

Har även en annan fråga: Om jag har öppnat ett popupfönster från en sida och sedan i popupfönstret vill göra så att sidan jag öppnade fönstret från uppdateras, hur gör jag då?

Tack på förhand!

koala

2005-09-21 15:01

Förslagsvis kan du ge varje td ett unikt id, t ex id="td_nr_1" osv. Sen har du en funktion som heter f, och ser ut typ så här (pseudokod...):

<script>
function f (objekt) {
foreach (tds as td) {td.className = 'list';}
objekt.className = 'list_on';
}
</script>

<TABLE>
<TR><TD class="list" onclick="f(this)"></TD></TR>
<TR><TD class="list" onclick="f(this)"></TD></TR>
<TR><TD class="list" onclick="f(this)"></TD></TR>
</TABLE>

Charlie

2005-09-21 16:16

Du behöver inte ge alla TD ett eget id eftersom du kan nyttja DOM.

Citat:

<table id="theTable">
<tr><td onClick="switch(this.parentNode)">...</td></tr>
<tr><td>...</td></tr>
<tr><td>...</td></tr>
</table>

<script>

function switch( toNode ) {

var nodes = document.getElementById("theTable").childNodes;

// Ta bort föregående "markeringar" och ställ in den nya.
for( var i = 0; i < nodes.length; i++) {

if( nodes[i] == toNode )
nodes[i].className = "list_sel";
else
nodes[i].className = "list";

}

}

</script>

Notera att jag inte har testat koden så den innehåller eventuellt en och annan bugg.

edit: notera att alla td skall ha en identisk onclick. Det skulle dock gå att skriva om scriptet så att ingen inline-javascript behövdes.

Martin

2005-09-21 18:07

Har testat koden som jag fick av dig Xyzi men jag får den inte att fungera. Inga felmeddelanden men inget händer heller. Får nodes.length till 1, vilket jag tycker verkar konstigt. Den borde väl vara 3 eller 2 om man räknar med nollan?

Ser någon var felet ligger?

Kod:

<script>



function change(toNode) {

var nodes = document.getElementById("theTable").childNodes;

  

for (var i = 0; i < nodes.length; i++) {

        if (nodes[i] == toNode) {nodes[i].className = "list_sel"}

        else {nodes[i].className = "list"} 

        alert(nodes.length)

        }

}



</script>

<link href="style.css" rel=stylesheet>

<table id="theTable">

<tr><td class=list onClick="change(this.parentNode)">asd</td></tr>

<tr><td class=list onClick="change(this.parentNode)">asd</td></tr>

<tr><td class=list onClick="change(this.parentNode)">asd</td></tr>

</table>

koala

2005-09-21 21:20

getElementById är lite olika mellan webbläsarna... kanske det som är problemet?

WizKid

2005-09-21 22:04

Testa att ändra till:

Kod:

function change(toNode) {

 var nodes = document.getElementById("theTable").rows;



 for (var i = 0; i < nodes.length; i++) {

  if (nodes[i] == toNode) {

   nodes[i].className = "list_sel"

  }

  else {

   nodes[i].className = "list"

  }

 }

}

Anledningen att det andra sättet inte fungerar är att Table har en child som heter Tbody och under dem ligger alla tr men även andra nodes.

Alla tider är GMT +2. Klockan är nu 03:15.