How to maintain table formatting after applying JS script?

[BaseballGraphs]

Hello,

I am applying the following Javascript code:

 
<script type="text/javascript">
function showValue(){
var selVal = document.getElementById('mySelect').options[document.getElementById('mySelect').selectedIndex].value;
var tblObj = document.getElementById('myTable');
var rowLen = tblObj.rows.length;
 
for(var i=0 ; i<rowLen ; i++)
{
 var idd = tblObj.rows[i].id;
 if( parseFloat(idd) >= parseFloat(selVal) ){
    tblObj.rows[i].style.display='block';
 } else {
    tblObj.rows[i].style.display='none';
  }
 }
}
</script>
 

To this table

<table width="50%" border="0" id="myTable">
<thead>
<tr id="501">
  <th>Rank</th>
  <th>Player</th>
  <th>Statistic</th>
</tr>
</thead> 
<tr id="1.0000"> 
  <td><div align="center">1</div></td> 
  <td><div align="left" value="1.0000"><a href="frontend.php">Chacin</a></div></td> 
  <td><div align="left">4.0000</div></td> 
</tr> 
<tr id="3.0000"> 
  <td><div align="center">2</div></td> 
  <td><div align="left" value="3.0000"><a href="frontend.php">Hill</a></div></td> 
  <td><div align="left">1.3330</div></td> 
</tr> 
<tr id="4.0000"> 
  <td><div align="center">3</div></td> 
  <td><div align="left" value="4.0000"><a href="frontend.php">Ciriaco</a></div></td> 
  <td><div align="left">1.2500</div></td> 
</tr> 
<tr id="1.0000"> 
  <td><div align="center">4</div></td> 
  <td><div align="left" value="1.0000"><a href="frontend.php">Kansen</a></div></td> 
  <td><div align="left">1.0000</div></td> 
</tr> 
<tr id="1.0000"> 
  <td><div align="center">5</div></td> 
  <td><div align="left" value="1.0000"><a href="frontend.php">Meek</a></div></td> 
  <td><div align="left">1.0000</div></td> 
</tr> 
</table>
 

Whenever I apply the Javascript filter to the table, the table loses its formatting. How can I maintain the current table widths and alignments as I have them already after the javascript has been applied?

Any assistance would be very helpful! Thank you.

[RamananKalirajan]

Hi,
Hiding a table row is fine, just set

document.getElementById(‘theRow’).style.display = ‘none’

When you’re trying to show it though, it can get confusing – for it to display properly, you’ve to set display=’table-row’ for Firefox and display=’block’ for IE.

The solution? Set display=” and the display property for the element gets set to its default (‘table-row’ for FF and ‘block’ for Explorer).

Thanks and Regards
Ramanan Kalirajan