Click Item in Table, Highlit it and same in another Table

[Frank_Rizzo]

I have two tables Widgets North and Widgets South

Widgets North
-------------
Blue 100
Red 150
Green 110

Widgets South
-------------
Blue 120
Red 255
Green 87

What I would like to do is be able to highlight two rows (from the seperate tables) at the same time.

If I click Blue then the rows for Blue 100 and Blue 120 are both highlighted (say, background colour applied)

If I then click Green both Blue's will be de-highlighted and Green 110 and Green 87 rows will be highlighted.

I can easily do this via a url get:

<a href = widgets.php?highlight=blue > Blue </A>

This will reload the script and detect that blue was clicked so highlight all rows for Blue.

But I think it can be done neater with javascript getElementByID?

[jshanman]

<table id="table1">
<tr id="t1_blue" onclick="highlight(this.id)">...</tr>
<tr id="t1_red" onclick="highlight(this.id)">...</tr>
<tr id="t1_green" onclick="highlight(this.id)">...</tr>
</table>

<table id="table2">
<tr id="t2_blue" onclick="highlight(this.id)">...</tr>
<tr id="t2_red" onclick="highlight(this.id)">...</tr>
<tr id="t2_green" onclick="highlight(this.id)">...</tr>
</table>

var lastColor = "";
var defaultColor = "white";
var highlightColor = "yellow";

function highlight(id) {
var t1 = document.getElementById("table1");
var t2 = document.getElementById("table2");
var newColor = id.split("_")[1];
var allTables = new Array(t1,t2);
for (c = 0; c < allTables.length; c++) {
var trs = allTables[c].getElementByTagName("tr");
for (i = 0; i < trs.length; i++) {
var rowColor = trs[i].id.split("_")[1];
if (rowColor == newColor) {
trs[i].style.background = highlightColor;
} else if (rowColor == lastColor) {
trs[i].style.background = defaultColor
}
}
}
lastColor = newColor;
}

Untested, but I think you get the idea!

- JS

[Frank_Rizzo]

Excellent!

All I had to do was to change a typo:

getElementByTagName

to

getElementsByTagName

and it worked first time.

Many thanks for that.