Javascript :Table filter help required

**myuser** · 05-04-2012 09:25 AM

Hi Guys,
I have attached a js.txt file here with this post. The html in that file shows some data in table format. I need to have a filter (drop-down) above the "Status" column which will have two values :

i) show all
ii)only valid status

Upon selecting "show all" it will show all the status "IN", "CO" and "-".
But selecting "only valid status" will discard "-" and will only show "IN" and "CO".

Please notice, I created a "Choose view filter" drop-down just above the table.
I need exactly same drop-down above "Status" column which will work as per
above explanation.

Thanks.

**Padonak** · 05-04-2012 11:56 AM

have never seen such a weird markup before

**myuser** · 05-04-2012 12:20 PM

Hi ,
Please let me know what was weird ? I am confused .

Thanks

**Padonak** · 05-04-2012 02:01 PM

i meant things like these:

Code:

<html>Choose view filter</html><html><br></html>

**myuser** · 05-05-2012 01:55 AM

Hi padonak,

You may ignore that part. I hope you have understood the requirement.
The table structure is clear I guess. I need just a filter above the "Status"
column which is a drop-down and will work as explained before.

I need help on the Javascript code to implement that.

Please let me know if you have any ohter query.

Thanks.

**xelawho** · 05-05-2012 09:11 AM

I didn't look at your zip file, but this is the basic idea - maybe you can adapt it...

Code:

<html>
	<head>
	</head>
	
	<body>

<table width="75%" border="1" id="mytable">
  <tr>
    <td>Name</td>
    <td><select onchange="showRows(this.value)">
<option value="all">show status</option>
<option value="all">all</option>
<option value="active">valid</option>
</select>
</td>
  </tr>
  <tr>
    <td>John</td>
    <td>IN</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>CO</td>
  </tr>
  <tr>
    <td>Fred</td>
    <td>-</td>
  </tr>
</table>
<script type="text/javascript">
mytab=document.getElementById("mytable")
function showRows(val){
for (var i = 0; i < mytab.rows.length; i++) {
if (val=="all"){
mytab.rows[i].style.display="table-row"
		} else {
if (mytab.rows[i].cells[1].innerHTML=="-"){
mytab.rows[i].style.display="none"
}		
		}
	}
}
</script>
</body>
</html>

**Padonak** · 05-05-2012 01:44 PM

the main headache was caused by rowspans. this script acts the same to the one posted by xelawho, but it uses JQuery framework (see the linked script) and it hides and shows those rowspans.

to get it working you must set attribute id="maintab" for the main table or it will hide and show another table's rows on the page also. it is highly recommended to fix the markup or it may work incorrectly because it's logic is based on it.

from your code, every Command cell sibling to a cell having Status "-" has no links but just text. this was taken as a token.

tested in: Opera, IE, FF, Chrome, Safari

**Padonak** · 05-06-2012 07:27 AM

the archive updated. there's no need to set the main table id manually, it is set automatically

**myuser** · 05-08-2012 12:01 AM

Hi Padonak,

Thanks for the solution. It is working perfectly.
But the only problem it is not working in all the versions of
firefox and internet explorer. Only on Firefox 2.0.0.13, it is
working but not on others.

Do I need to change anything to make it work on all any browser
irrespective of its version ?

Please help.

Thanks in advance.

**myuser** · 05-08-2012 05:23 AM

Hi Padonak,

Sorry. It was my mistake. It is working in all browsers.

Thanks.

**Padonak** · 05-08-2012 05:35 AM

good to hear )

**myuser** · 05-09-2012 06:07 AM

Hi Padonak,
The solution you sent is working perfectly for that html, but showing some discrepancy in the filtered data for two other htmls. I am attaching the other
two html (in ".txt", please save them in html to check) for which it is partially working.

1. notWorking_1.txt -> There are 11 valid values for "Status" column including 'ER' and 'OK', but only 8 are coming when filtering. Because of the 'rowspan' of the cells under "Task" and "Command" columns

2 notWorking_2.txt -> Same thing and even more interesting. When all the value of "Status" columns are "-" for a particular rowspan , then it is coming.
But in this example one cell is having "IN" for a rowspan and that is not coming.
Please check the "task_template_qualify_dep" row should come but it is not coming.

Thanks.

**Padonak** · 05-09-2012 04:45 PM

ok i'll take a look at these files and let you know

**myuser** · 05-10-2012 01:01 AM

Hi Padonak,

I consolidated the two htmls for your ease of working. I am attaching that.
For finding the discrepancy you can focus on three consecutive cells under
the "Task" column having value "checkRsf" , "checkRsf1" and "checkRsf2" .

The "Status" filtering for "checkRsf" is working fine. Problem is the other two columns i.e "checkRsf1" and "checkRsf2". I hope you can easily find that for these two columns the rows having "IN" value is not coming while choosing
"onlyValidStatus" in the drop-down above the "Status" column.

Please find the file attached.

Thanks a lot.

**Padonak** · 05-10-2012 02:53 AM

pls read comments in the txt-file

Thread: Javascript :Table filter help required

Thread Tools

Display

Javascript :Table filter help required

In reply to Javacript:table filter help

Javascript:Table filter help

Javascript Table Filter

Table filter

JavaScript: Table Filter

Table filter

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions