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