Hi there,
I'm using some JavaScript which adds a filter to my table. It works well - as the user types in the search box, the table rows appear and disappear dynamically to show only the rows which contain text that matches what the user types in.
I would like to add a counter next to the search box which shows how many rows are displayed. However, my attempts have failed miserably - the number is static and doesn't change dynamically.
Is anyone able to explain where I have gone wrong? Here my the latest complete demo code:
Many thanks,
Katie
I'm using some JavaScript which adds a filter to my table. It works well - as the user types in the search box, the table rows appear and disappear dynamically to show only the rows which contain text that matches what the user types in.
I would like to add a counter next to the search box which shows how many rows are displayed. However, my attempts have failed miserably - the number is static and doesn't change dynamically.
Is anyone able to explain where I have gone wrong? Here my the latest complete demo code:
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Row 1</title>
<script language="javascript" type="text/javascript">
function rowCount()
{
var numRows = 1;
var displayNum = 0;
var table = document.getElementById('tableID');
for (var numRows = 1; numRows < table.rows.length; numRows++){
if (document.getElementById('tableId').rows.length.style!='display:none'){
displayNum++;
}
else{
displayNum;
}
}
document.glossary.displayNumBox.value = displayNum //toFixed displays numbers to 2 decimal places
}
</script>
<script type="text/javascript">
function filter (phrase, _id){
var words = phrase.value.toLowerCase().split(" ");
var table = document.getElementById(_id);
var ele;
for (var r = 1; r < table.rows.length; r++){
ele = table.rows[r].innerHTML.replace(/<[^>]+>/g,"");
var displayStyle = 'none';
var displayNum = 0;
for (var i = 0; i < words.length; i++) {
if (ele.toLowerCase().indexOf(words[i])>=0){
displayStyle = '';
}
else {
displayStyle = 'none';
break;
}
}
table.rows[r].style.display = displayStyle;
}
}
</script>
</head>
<body>
<form name="glossary" style="float: left; padding-right: 20px;">
<b>Search:</b> <input name="filt" onKeyUp="filter(this, 'tableID', '1'); rowCount();" onkeyup="rowCount();" type="text">|
<input type="text" id="displayNumBox" name="displayNumBox" value="0"><br />
</form> <br><br>
<table id="tableId">
<tr style="display:none"><td>Row 1</td></tr>
<tr><td>Row 2</td></tr>
<tr><td>Row 3</td></tr>
</table>
</body>
</html>Many thanks,
Katie
