Filter HTML table by Div Value with Javascript?

**RamananKalirajan** · Sep 29 '10, 03:52 AM

You can do it. But doing it with div is little bit complicated. Set the value of the div to the tr as it's id like below.

Ex:

Code:

<table id="myTable"> 
<tr id="198.1000">  
  <td><div align="center">1</div></td>  
  <td><div align="left" value="198.1000"><a href="frontend.php">Shields</a></div></td>  
  <td><div align="left">111.0000</div></td>  
</tr>  
<tr id="183.2000">  
  <td><div align="center">2</div></td>  
  <td><div align="left" value="183.2000"><a href="frontend.php">Millwood</a></div></td>  
  <td><div align="left">108.0000</div></td>  
</tr>  
<tr id="189.1000">  
  <td><div align="center">3</div></td>  
  <td><div align="left" value="189.1000"><a href="frontend.php">Lopez</a></div></td>  
  <td><div align="left">106.0000</div></td>  
</tr>  
</table>

As per your requirement provide a select/combo box to the user from which they can select a value. Onchange of the value trigger a js function and fetch the table object. Check the id of the tr with the value selected in combo box. If the value is equal or greater let the rows be shown else hide it.

Sample:

Code:

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(idd>=selVal){
     tblObj.rows[i].style.display='block';
  }else{
     tblObj.rows[i].style.display='none';
  }
 }
}

Guess this will solve ur problem

Thanks and Regards
Ramanan Kalirajan

**Dormilich** · Sep 29 '10, 08:15 AM

some annotations:
- there is no need to use <div> at all
- the value attribute is valid only for input/option elements
- align can be replaced by CSS
@ RamananKaliraja n
- line #2: you get the same with document.getEle mentById('mySel ect').value (.value is a property of every form control element)

**BaseballGraphs** · Sep 29 '10, 10:55 PM

Thanks very much for your feedback and assistance on this matter. I seem to be encountering some errors with it. For instance, even when I set my minimum value to 200, table rows like this one show:

Code:

<tr id="6.0000"> 
  <td><div align="center">11</div></td> 
  <td><div align="left" value="6.0000"> 
<a href="frontend.php">Charles</a></div></td> 
  <td><div align="left">0.5000</div></td> 
</tr>

I would expect that given that I only want rows that have a higher <td id> greater than 200, something like this wouldn't show...

Would it make a difference if my table is dynamically generated?

**RamananKalirajan** · Sep 30 '10, 04:00 AM

Nope there wont be any difference in dynamic things

This is a sample i developed from what you have given, it works fine for me.

Code:

<html>
<head>
<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(idd>=selVal){ 
     tblObj.rows[i].style.display='block'; 
  }else{ 
     tblObj.rows[i].style.display='none'; 
  } 
 } 
}  
</script>
</head>
<body>
<select id="mySelect" onchange="showValue()">
  <option value="100">100</option>
 <option value="150">150</option>
<option value="180">180</option>
</select>
<table id="myTable">  
<tr id="198.1000">   
  <td><div align="center">1</div></td>   
  <td><div align="left" value="198.1000"><a href="frontend.php">Shields</a></div></td>   
  <td><div align="left">111.0000</div></td>   
</tr>   
<tr id="183.2000">   
  <td><div align="center">2</div></td>   
  <td><div align="left" value="183.2000"><a href="frontend.php">Millwood</a></div></td>   
  <td><div align="left">108.0000</div></td>   
</tr>   
<tr id="189.1000">   
  <td><div align="center">3</div></td>   
  <td><div align="left" value="189.1000"><a href="frontend.php">Lopez</a></div></td>   
  <td><div align="left">106.0000</div></td>   
</tr>
<tr id="100.1000">   
  <td><div align="center">4</div></td>   
  <td><div align="left" value="100.1000"><a href="frontend.php">Lopez</a></div></td>   
  <td><div align="left">106.0000</div></td>   
</tr>    
<tr id="120.1000">   
  <td><div align="center">5</div></td>   
  <td><div align="left" value="120.1000"><a href="frontend.php">Lopez</a></div></td>   
  <td><div align="left">106.0000</div></td>   
</tr> 
<tr id="160.1000">   
  <td><div align="center">6</div></td>   
  <td><div align="left" value="160.1000"><a href="frontend.php">Lopez</a></div></td>   
  <td><div align="left">106.0000</div></td>   
</tr> 
<tr id="170.1000">   
  <td><div align="center">7</div></td>   
  <td><div align="left" value="170.1000"><a href="frontend.php">Lopez</a></div></td>   
  <td><div align="left">106.0000</div></td>   
</tr> 
</table>  
</body>
</html>

Please post your code...

**BaseballGraphs** · Sep 30 '10, 04:15 AM

My code is contingent upon several functions and variables, but here is the general code, maybe you can find why there might be an issue with the sorting:

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( idd > selVal ){
    tblObj.rows[i].style.display='block';
 } else {
    tblObj.rows[i].style.display='none';
  }
 }
}
</script>
<select id="mySelect" onchange="showValue()">
<option><? $batting_statistic = array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 54, 55, 56, 57, 58);
if(in_array($statistic_id, $batting_statistic)) echo "-- Min. At Bats --"; else echo "-- Min. Innings Pitched --"; ?></option>
<option value="5">5</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="150">150</option>
<option value="200">200</option>
<option value="350">350</option>
</select>
<table width="50%" border="0" id="myTable">
<tr>
 <td width="20%"><div align="center" class="style3">Rank</div></td>
  <td width="35%"><div align="left" class="style3">Player</div></td>
  <td width="45%"><div align="left" class="style3"><?= $statistic; ?></div></td>
</tr>
<? $i = 0;
   foreach( $array as $player_id => $value ) {
   $player_name = getPlayerNameFromId ( $player_id );
   $team_name = getTeamNameFromId ( $player_id );
   $innings_pitched = getIpFromId ( $player_id, $ip );
   $at_bats = getABFromId ( $player_id, $ab );
   $position_name = getPosNameFromId ( $player_id );
   $i++; ?>
<tr id="<? $innings_pitched; if(in_array($statistic_id, $batting_statistic)) echo $at_bats; else echo $innings_pitched; ?>">
  <td><div align="center"><?= $i; ?></div></td>
  <td><div align="left" value="<? $innings_pitched; if(in_array($statistic_id, $batting_statistic)) echo $at_bats; else echo $innings_pitched; ?>"><a href="frontend.php?p=<?= $player_id; ?>&s=<?= $statistic_id; ?>&y=<?= $year; ?>"><?= $player_name; ?>, <?= $team_name; ?>, <?= $position_name; ?></a></div></td>
  <td><div align="left"><?= $value; ?></div></td>
</tr>
<? } ?>
</div>
</table></body>
</html>

Here is a sample output page: http://tyrone.pae.me/frontend.php?p=347&s=47&y=2010

Please let me know if you find anything that could explain for why it isn't working...

**RamananKalirajan** · Sep 30 '10, 04:32 AM

Code:

var idd = tblObj.rows[i].id;

After this statement insert an alert and check whether the value idd is coming with any space or its containing the perfect value and all.

Thanks and Regards
Ramanan Kalirajan

**BaseballGraphs** · Sep 30 '10, 04:35 AM

Hi Ramanan,

I am very poor at javascript and don't know how to do what you suggested. Could you show me what you mean?

**RamananKalirajan** · Sep 30 '10, 04:37 AM

Code:

var idd = tblObj.rows[i].id;

Replace this line with

Code:

var idd = tblObj.rows[i].id;  
alert("***"+idd+"***");

Thanks and Regards
Ramanan Kalirajan

**BaseballGraphs** · Sep 30 '10, 04:42 AM

Hi Ramanan,

I've attached some images here of what shows up after applying the alert. Is this to be expected?

**RamananKalirajan** · Sep 30 '10, 06:11 AM

Hi,
Why in the first image there was no value? For all the option in the select you have specified value rite?

Thanks and Regards
Ramanan Kalirajan

**BaseballGraphs** · Sep 30 '10, 01:28 PM

Hi,

The reason that there was no value in the first image is because I do not specify a <tr id> value for the very first <tr> I have in the table, because the very first <tr> are placeholders for column headers. Additionally, the first <tr> is not in my foreach statement so the php code would not even make sense there.

Here is the very first <tr> with no id value:

Code:

 <table width="50%" border="0" id="myTable">
 <tr>
  <td width="20%"><div align="center" class="style3">Rank</div></td>
   <td width="35%"><div align="left" class="style3">Player</div></td>
   <td width="45%"><div align="left" class="style3"><?= $statistic; ?></div></td>
 </tr>

**BaseballGraphs** · Oct 1 '10, 06:05 PM

If anyone has any further suggestions or ideas on why this isn't working, please submit to the thread. Thank you.

**BaseballGraphs** · Oct 3 '10, 12:53 AM

The problem appears to be the type of value it was looking for. It was resolved by doing:

Code:

parseFloat(idd) > parseFloat(selVal)

**RamananKalirajan** · Oct 4 '10, 04:32 AM

Glad that you have found it. For the past few days I was strucked with my personal works. So not able to reply you soon.

Thanks and Regards
Ramanan Kalirajan

Filter HTML table by Div Value with Javascript?

Filter HTML table by Div Value with Javascript?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment