Filter HTML table by Div Value with Javascript?

608

512MB

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:

Expand|Select|Wrap|Line Numbers

 <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>

Expand|Select|Wrap|Line Numbers

 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

Sep 29 '10 #2

Dormilich

8,658

Expert Mod 8TB

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
@ RamananKalirajan
- line #2: you get the same with document.getElementById('mySelect').value (.value is a property of every form control element)

Sep 29 '10 #3

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:

Expand|Select|Wrap|Line Numbers

 
<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?

Sep 29 '10 #4

608

512MB

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.

Expand|Select|Wrap|Line Numbers

 
<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...

Sep 30 '10 #5

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:

Expand|Select|Wrap|Line Numbers

  
<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...

Sep 30 '10 #6

608

512MB

Expand|Select|Wrap|Line Numbers

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

Sep 30 '10 #7

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?

Sep 30 '10 #8

608

512MB

Expand|Select|Wrap|Line Numbers

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

Replace this line with

Expand|Select|Wrap|Line Numbers

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

alert("***"+idd+"***");

Thanks and Regards
Ramanan Kalirajan

Sep 30 '10 #9

Hi Ramanan,

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

Sep 30 '10 #10

608

512MB

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

Sep 30 '10 #11

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:

Expand|Select|Wrap|Line Numbers

 
 <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>

Sep 30 '10 #12

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

Oct 1 '10 #13

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

Expand|Select|Wrap|Line Numbers

parseFloat(idd) > parseFloat(selVal)

Oct 3 '10 #14

608

512MB

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

Oct 4 '10 #15

If I wanted to default the filter on page load to a particular value in my drop down table, how would that be accomplished. The function is 'onchange' at the moment, so simply indicating "yes" for a selected value does not accomplish it. Does anyone have any ideas?

Oct 12 '10 #16

Modifying HTML Table through DOM

608

512MB

Hi you can do it yaar. It's simple. Few changes in your script function will do that. On page load call the function with the default value.

Ex:

Expand|Select|Wrap|Line Numbers

<body onload = "showValue('100')" >

and change the script function to have a parameter in it. Check for the parameter value. If it is not null use that value, if it is null use the select box value.

Ex:

Expand|Select|Wrap|Line Numbers

 function showValue(defVal){

  var selVal;

  if( defVal!=null && defVal!="" )

  {

     selVal = defVal;

     defVal="";

  }

  else

    selVal = document.getElementById('mySelect').value;
 
//Your Js Code...  

}

Thanks and Regards
Ramanan Kalirajan

Oct 13 '10 #17

Similar topics

by: Jeff J. | last post by:

The basic concept is a music playlist that I'm trying to write as a table inside a div. I have Song and Playlist 'classes'. The Song class has a Write() method, as does the Playlist. The...

Sorting a HTML table with Javascript

by: Gareth Gale | last post by:

I'm trying to implement a way of allowing a user to sort a HTML table via Javascript on the client. I've seen lots of samples where single column sorting (asc or desc) is shown, but I'd like nested...

How do you access rows and columns of a HTML table?

by: anonieko | last post by:

This example applies to javascript, table, cells, rows > > How do you access rows and columns of a HTML table? > > > <script language="javascript"> alert('start');

How to Freeze Rows in a html table Using Javascript and HTML

by: chansiboy | last post by:

Hi, I've developed a jsp page, where in i had a table getting list of data. I want the table header to be fixed, and i should allow scrolling only for the data in the table. Can anyone please...

Sorting an HTML Table with javascript.

by: suvarna1026 | last post by:

Hi,I am doing project in ASP.NET(by VB.NEt).I have created an HTML Table.Now I want to apply sorting to the table in javascript.How can I do this?Any help will be appreciated.Thanking you!

Randomize HTML Table Rows from JavaScript

by: sanju | last post by:

Dear All, I have html table and this table contains 10 Rows and 2 column, I want every time this HTML page is called by the user to view the rows Randomly. How can I do this from JavaScript? ...

function for Calculating sum of values in row and coloms of html table by javascript

by: tarunkhatri | last post by:

HI can anyone help me with a function of javascript ... that calculates the sum of all colums at the very last row and also sum of all rows at the very last coloum.... It wiuld be like a 2-d array...

Wordpress or something else?

by: Faith0G | last post by:

I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

Content Management Systems

Access Europe: Command bars, the Access Shortcut Tool and a simple Audit Log - Wed 3 April

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

General

One-click Importing Excel Data into a*Database

by: ryjfgjl | last post by:

In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...

Microsoft Excel

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...