469,631 Members | 1,204 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,631 developers. It's quick & easy.

Filtered table

How can I hide an entire row of a table if one of the cells in that row is
equal to a value drop down box value.

My goal is to have a filtered table so that each cell in each row determines
if it should be hidden by drop down boxes. Thanks for your help.
Jul 23 '05 #1
2 3065
Seth wrote on 18 apr 2004 in comp.lang.javascript:
How can I hide an entire row of a table if one of the cells in that
row is equal to a value drop down box value.

My goal is to have a filtered table so that each cell in each row
determines if it should be hidden by drop down boxes. Thanks for your
help.

<table border=1>
<tr id=tr1><td id=td1>qwerty</td><td>more</td></tr>
<tr id=tr2><td id=td2>qwerty</td><td>more</td></tr>
<tr id=tr3><td id=td3>blah</td><td>more</td></tr>
</table>
<br>

Do not show:
<select onChange=doHide(this); >
<option selected>none</option>
<option>blah</option>
<option>qwerty</option>
</select>

<script>
function doHide(that){
testvalue = that.options[that.selectedIndex].innerHTML
for(i=1;i<4;i++){
trps = document.getElementById("tr"+i).style
tdp = document.getElementById("td"+i)
trps.display=(tdp.innerHTML==testvalue)?"none":""
}
}
</script>

IE6 tested
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Jul 23 '05 #2
"Seth" <se**@doesnotexist.com> writes:
How can I hide an entire row of a table if one of the cells in that row is
equal to a value drop down box value.
To hide a row, set its visibility to hidden (which leaves its space
blank) or its display to none (which completely removes the row).

---
<table id="table">
<tr><td>foo</td><td>bar<td></tr>
<tr><td>foo</td><td>baz<td></tr>
<tr><td>doo</td><td>bar<td></tr>
<tr><td>doo</td><td>baz<td></tr>
</table>

<lable for="col1sel">Column 1:
<select id="col1sel"
onchange="filterTable('table',0,
this.options[this.selectedIndex].value);">
<option selected="selected">None</option>
<option value="foo">Filter out "foo"</option>
<option value="doo">Filter out "doo"</option>
</select>
</label>

<script type="text/javascript">
function filterTable(table,column,value) {
var tableRef = document.getElementById(table);
var rows = tableRef.rows;
if (value) { // for partial matching
var valueRE = new RegExp(value);
}
for(var i=0,n=rows.length;i<n;i++) {
var row = rows.item(i);
if (!value) {
// set default, block in IE, table-row in standards
row.style.display = "";
} else {
var cell = row.cells.item(column);
var cellText = cell.firstChild.nodeValue;
if (valueRE.test(cellText)) {
row.style.display = "none";
} else {
row.style.display = "";
}
}
}
}
</script>
---
This assumes that the table cells contains only text, not HTML, because that
makes it easier to extract the text content.
It also doesn't generaliz very well to filtering on more than one column,
because it sets the display property directly (so unhiding on cell in
a column will make its row visible, even though it might have been hidden
by another column too).
My goal is to have a filtered table so that each cell in each row determines
if it should be hidden by drop down boxes. Thanks for your help.


For this you need to remember the hidden state for each row, so if a row is
hidden by more than one cell, it has to be unhidden by all of them.
---
<table id="table">
<tr><td>foo</td><td>bar<td></tr>
<tr><td>foo</td><td>baz<td></tr>
<tr><td>doo</td><td>bar<td></tr>
<tr><td>doo</td><td>baz<td></tr>
</table>

<lable for="col1sel">Column 1:
<select id="col1sel"
onchange="filterTable('table',0,
this.options[this.selectedIndex].value);">
<option selected="selected">None</option>
<option value="foo">Filter out "foo"</option>
<option value="doo">Filter out "doo"</option>
</select>
</label>

<lable for="col2sel">Column 2:
<select id="col2sel"
onchange="filterTable('table',1,
this.options[this.selectedIndex].value);">
<option selected="selected">None</option>
<option value="bar">Filter out "bar"</option>
<option value="baz">Filter out "baz"</option>
</select>
</label>

<script type="text/javascript">
// format : map(tableId->array(object(hidNum:int,hidCol:array(bool))))
var tableFilterData = {};
function filterTable(tableId,column,text) {
var tableRef = document.getElementById(tableId);
var filterData = tableFilterData[tableId];
if (!filterData) { // create if first time
filterData = tableFilterData[tableId] = [];
}
var rows = tableRef.rows;
if (text) {
var textRE = new RegExp(text);
}
for (var i=0,n=rows.length;i<n;i++) {
var row = rows.item(i);
var rowData = filterData[i];
if (!rowData) {
rowData = filterData[i] = {hidNum:0,hidCol:[]};
}
var nowHide = false;
if (text) {
var cell = rows.item(i).cells.item(column);
var cellText = cell.firstChild.nodeValue;
newHide = textRE.test(cellText);
}
if (newHide != !!rowData.hidCol[column]) {
rowData.hidCol[column] = newHide;
if (newHide) {
rowData.hidNum ++;
} else {
rowData.hidNum --;
}
row.style.display = ((rowData.hidNum == 0) ? "" : "none");
}
}
}
</script>
---
This script works with multiple tables and columns, but is not stable
against changes in the table structure. If that is needed, you can
try putting the rowData object on the row element itself, i.e., change
var rowData = filterData[i];
if (!rowData) {
rowData = filterData[i] = {hidNum:0,hidCol:[]};
}
to
var rowData = row.filterData;
if (!rowData) {
rowData = row.filterData = {hidNum:0,hidCol:[]};
}
It requires you to be able to add properties to the rowElement, which
is most likely possible, but not required by the standard (it's a host
object, so it can behave almost arbitrarily).

Good luck.
/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

4 posts views Thread by johnb41 | last post: by
7 posts views Thread by Randy | last post: by
1 post views Thread by s26f84 | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.