Overriding CSS styles using JS

[Karthik Mohan]

I have a table for which its width, background color etc., are defined using CSS styles and applied using the <div> tag.

There is a checkbox in one of the columns and upon clicking the checkbox I would like to change the color of the selected/unselected ROW in the table. I am not able to override the initial styles specified using CSS. how can i do this ?? If i do not apply the table styles using CSS, I am able to change the color depending on the checkbox state, but when the styles are applied, there is no effect.

TIA
karthik

[Eric Pascarello]

Without seeing the code, I have a feeling you are styling the cells with a background color and changing the row? Am I right?

Eric

[Bear Bibeault]

"Karthik M",

There aren't may rules that you need to worry about here on the Ranch, but one that we take very seriously regards the use of proper names. Please take a look at the JavaRanch Naming Policy and adjust your display name to match it.

In particular, your display name must be a first and a last name separated by a space character, and must not be obviously fictitious.

Thanks!
bear
Forum Bartender

[Karthik Mohan]

Eric, my JS function is

function changeBgColor(obj, tableRowId) {
var tableRow = document.getElementById(tableRowId);
 
(obj.checked == true) ? tableRow.style.background =
"yellow" : tableRow.style.background = "white";
}

I call the JS function like

on c l i c k = changeBgColor(t h i s,matInd_1_1)

where matInd_1_1 is the "id" for that table row ..

[double quotes are omitted due to errors while posting .. the spaces for the onclick event also for similar reasons]

thanks
karthik

[ August 08, 2005: Message edited by: Karthik M ]
[ August 08, 2005: Message edited by: Karthik M ]

[Eric Pascarello]

function changeBgColor(obj, tableRowId){
  var tableRow = document.getElementById(tableRowId);
  var strColor = (obj.checked == true) ?"yellow":"white";
  tableRow.style.backgroundColor = strColor;
}

[Karthik Mohan]

That does not solve the problem. The table row's color is not changing at all.

[Eric Pascarello]

I just wrote you a fancy version of a script that changes the row color depending on the checkbox.

<style type="text/css">
 table{ border: 1px solid black; border-collapse: collapse; }
 th{ background-color: gray; padding: 2px; }
 td{ padding: 2px; border-top: 1px solid black; }
 tr{ background-color: #AFC1ED; }
 tr.alt{ background-color: #D0D0D0; }
</style>
 
<script type="text/javascript">
 
  window.onload = function(){
    ConvertRowsToLinks("Data1");
  }
      
  var strHighColor = "#FF8000";
  var strSelectedColor = "#FAE86B";
      
  function ConvertRowsToLinks(xTableId){
    var rows = document.getElementById(xTableId).getElementsByTagName("tr");
    for(i=1;i<rows.length;i++){            
      rows[i].id = "row" + i;
      rows[i].orgBGColor = rows[i].style.backgroundColor;
      rows[i].onclick = new Function("SetThis(" + i + ",1)");
      rows[i].onmouseover = new Function("this.style.backgroundColor='" + strHighColor + "';this.style.cursor='pointer';");
      rows[i].onmouseout = new Function("SetThis(" + i + ",0)");
      rows[i].getElementsByTagName("input")[0].onclick = new Function("this.checked=!this.checked");
    }
  }
      
  function SetThis(xID,bChange){
    var objRow = document.getElementById("row" + xID);
    var objCB = objRow.getElementsByTagName("input")[0];
    if(bChange)objCB.checked = !objCB.checked;
    var strColor = (objCB.checked)?strSelectedColor:objRow.orgBGColor;
    objRow.style.backgroundColor = strColor;
  }
 
</script>
 
<table id="Data1">
  <tr>
    <th> </th>
    <th>Name</th>
    <th>Position</th>
  </tr>
  <tr>
    <td><input type="checkbox" name="cb1" /></td>
    <td>Eric Pascarello</td>
    <td>Crazy Programmer</td>
  </tr>
  <tr class="alt">
    <td><input type="checkbox" name="cb2" /></td>
    <td>Some Guy</td>
    <td>Beach Bum</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="cb3" /></td>
    <td>Anita Man</td>
    <td>Desperate</td>
  </tr>
  <tr class="alt">
    <td><input type="checkbox" name="cb4" /></td>
    <td>Wanda Job</td>
    <td>Begging</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="cb5" /></td>
    <td>Giveme Cash</td>
    <td>Hoping</td>
  </tr>
</table>

Eric