Click Changes Table Row Colors II

[Total: 0    Average: 0/5]

This shows how to have rows of a table have font color and background color changed on a checkbox click.

Head Code:

<style type=text/css>
body {color:blue;background-color:green;}
.ts {color:hotpink;background-color:white;}
</style>

Body Code:

<script>
isIE=document.all?true:false;
var isNS4=document.layers?true:false; 
var isNS6=navigator.userAgent.indexOf("Gecko")!=-1?true:false;
var bC=new Array('pink','white');
var C=new Array('black','hotpink');

function doIt(_v)
{
  //var s="";for(var i in document.exf1.docUNID[0])s+=i+" * ";alert(s);
  var X=eval("document.exf1.docUNID["+_v+"].checked?0:1");
  if(isIE)
  {
    eval("t"+_v+".style.backgroundColor=bC[X]");
    eval("t"+_v+".style.color=C[X]");
  }
  if(isNS6)
  {
    document.getElementById("t"+_v).style.backgroundColor=bC[X];
    document.getElementById("t"+_v).style.color=C[X];
  }
}
</script>
<form name=exf1>
<table border=1 cellpadding=3 cellspacing=3 align=center>
<tr><td class=ts id=t0>T0 -> C0<input type=checkbox name=docUNID onclick=doIt(0)></tr>
<tr><td class=ts id=t1>T1 -> C1<input type=checkbox name=docUNID onclick=doIt(1)></tr>
<tr><td class=ts id=t2>T2 -> C2<input type=checkbox name=docUNID onclick=doIt(2)></tr>
<tr><td class=ts id=t3>T3 -> C3<input type=checkbox name=docUNID onclick=doIt(3)></tr>
<tr><td class=ts id=t4>T4 -> C4<input type=checkbox name=docUNID onclick=doIt(4)></tr>
</table>
</form>

Times Viewed: 0

Leave a Reply

Your email address will not be published. Required fields are marked *