Shading Table Rows

[DreamerZ]

The code below is a table and script that shades the selected row a different color when the checkbox is checked.

The first 2 columns are spanned across the total rows, in this case 2 and the data rows are separate.

When I check the checkbox, only the FIRST row of data is shaded (the code bolded).

What I want to do is shade the whole thing. How can that be done with the first two columns spanning rows? Notice the TR id's are the same.

FYI, I'm using CSS, hence the "shade" class and again, everything works fine except that the shading is only done on the first row of data.

Thoughts? TIA!

DreamerZ

<table BORDER=1 CELLSPACING=0 CELLPADDING=2 width=100%><tr>
<td class=tablehead colspan=2><input type=button id=close_Abs value='Close Shaded Absences' onclick='closeAbs()'></td>
[b]
<tr id=tr1><td  class=centered rowspan=2>
<input type=checkbox id=abs_Select1 onclick=shade(1)><BR>
<input type=hidden id=abs_data1 name=abs_data1 value=Op_Name>
<input type=hidden id=opShaded1 name='opShaded1' value=0></td>
<td id=tdA1 class=centered value=Op_Name rowspan=2>Op_Name</td>
<td id=tdB1>6/16/2004</td>
<td id=tdC1>Partial</td>
<td id=tdD1>4.5</td>
<td id=tdE1>Headache</td>
<td id=tdF1>Yes</td>
<td id=tdG1>No</td>
<td id=tdH1><a href='bstAbsence.phtml?doc=1&abs_Operator=Op_Name>Coverage Documentation</a><BR><a href='' target=_'blank'>Submit FMLA</a></tr>[/b]
<tr id=tr1>
<td id=tdB1>6/17/2004</td>
<td id=tdC1>Full</td><td id=tdD1>8</td>
<td id=tdE1>Headache</td>
<td id=tdF1>Yes</td>
<td id=tdG1>No</td>
<td id=tdH1><a href='bstAbsence.phtml?doc=1&abs_Operator=Op_Name'>Coverage Documentation</a><BR><a href='' target=_'blank'>Submit FMLA</a></tr>
<tr id=tr1></tr>

<script>
function shade(row_num)
{
  if (document.getElementById('abs_Select' + row_num).checked==true)
  {
    document.getElementById('tr' + row_num).className='shade';
  }
  else {
    document.getElementById('tr' + row_num).className='';
    document.getElementById('opShaded' + row_num).value='0'; }
}
</script>

 

[friendlyposter]

A couple of starting thoughts ...

getElementById - Returns the FIRST or UNIQUE object with the same ID attribute as the specified value

If your intent is to address multiple elements, you might consider using

- a user-defined attribute such as SETYELLOW=1 instead of ID
- .getElementsByTagName('TR') to get MULTIPLE items

and loop thru all items in the collection selecting those with SETYELLOW=1, modifying the style.backgroundColor or concatenating/extracting the className as required

 

[BillyRayPreachersSon]

I haven't tried it, but the logic is sound enough... use the "nextSibling" property to find the next row along... Something like this:

function shade(row_num) {
	if (document.getElementById('abs_Select' + row_num).checked == true) {
		document.getElementById('tr' + row_num).className = 'shade';
		document.getElementById('tr' + row_num).nextSibling.className = 'shade';
	} else {
		document.getElementById('tr' + row_num).className = '';
		document.getElementById('tr' + row_num).nextSibling.className = '';
		document.getElementById('opShaded' + row_num).value = '0';
	}
}

Hope this helps,
Dan

 

[DreamerZ]

The .nextSibling works fine, but only for 2 rows, obviously. I tried to create a loop for each of the rows with the same number, but still only got 2 rows shaded.

With the nextSibling, do I have to set the current row to parent before looping to the nextSibling or is there another way.

I have yet to try the unique ID option from friendlyposter.


DreamerZ

 

[DreamerZ]

Alright, I've found the solution. I figured I'd post it in case anyone else searches. I've just included the script below:

function shade(row_num)
{
  if (document.getElementById('abs_Select' + row_num).checked==true)
  {
    trRow=document.getElementsByName('tr' + row_num);
    for (var i=0; i<trRow.length; i++) {
	trRow.item(i).className='shade';
    }
  }
  else {
    trRow=document.getElementsByName('tr' + row_num);
    for (var i=0; i<trRow.length; i++) {
	trRow.item(i).className='';
    }
    document.getElementById('opShaded' + row_num).value='0'; }
}

Thanks all for the direction.


DreamerZ

 

[BillyRayPreachersSon]

Aah - a far better solution than mine... I keep forgetting that getElementById will return a collection if more than one object exists with that ID. Mine solution was slighliy weightier:

function shade(row_num) {
	if (document.getElementById('abs_Select' + row_num).checked == true) {
		var startRow = document.getElementById('tr' + row_num);
		while (startRow != null && startRow.getAttribute('id') == 'tr' + row_num) {
			startRow.className = 'shade';
			startRow = startRow.nextSibling;
		}
		document.getElementById('tr' + row_num).className = 'shade';
	} else {
		var startRow = document.getElementById('tr' + row_num);
		while (startRow != null && startRow.getAttribute('id') == 'tr' + row_num) {
			startRow.className = '';
			startRow = startRow.nextSibling;
		}
		document.getElementById('opShaded' + row_num).value = '0';
	}
}

I'd stick with yours ;o)

Dan