<html>
<body>
<table border="1" id="myTable">
<tr><td>Cell 22-1</td><td>Cell 22-2</td></tr>
<tr><td>Cell 22-1</td><td>Cell 22-2</td></tr>
<tr><td>Cell 22-1</td><td>Cell 22-2</td></tr> <tr><td>Cell 1-1</td><td>Cell 1-2</td></tr>
<tr><td>Cell 2-1</td><td>Cell 2-2</td></tr>
<tr><td>Cell 3-1</td><td>Cell 3-2</td></tr>
<tr><td>Cell 4-1</td><td>Cell 4-2</td></tr>
<tr><td>Cell 5-1</td><td>Cell 5-2</td></tr>
<tr><td>Cell 22-1</td><td>Cell 22-2</td></tr>
<tr><td>Cell 22-1</td><td>Cell 22-2</td></tr>
<tr><td>Cell 22-1</td><td>Cell 22-2</td></tr> <tr><td>Cell 1-1</td><td>Cell 1-2</td></tr>
<tr><td>Cell 2-1</td><td>Cell 2-2</td></tr>
<tr><td>Cell 3-1</td><td>Cell 3-2</td></tr>
<tr><td>Cell 4-1</td><td>Cell 4-2</td></tr>
<tr><td>Cell 5-1</td><td>Cell 5-2</td></tr>
<tr><td>Cell 22-1</td><td>Cell 22-2</td></tr>
<tr><td>Cell 22-1</td><td>Cell 22-2</td></tr>
<tr><td>Cell 22-1</td><td>Cell 22-2</td></tr> <tr><td>Cell 1-1</td><td>Cell 1-2</td></tr>
<tr><td>Cell 2-1</td><td>Cell 2-2</td></tr>
<tr><td>Cell 3-1</td><td>Cell 3-2</td></tr>
<tr><td>Cell 4-1</td><td>Cell 4-2</td></tr>
<tr><td>Cell 5-1</td><td>Cell 5-2</td></tr>
<tr><td>Cell 22-1</td><td>Cell 22-2</td></tr>
<tr><td>Cell 22-1</td><td>Cell 22-2</td></tr>
<tr><td>Cell 22-1</td><td>Cell 22-2</td></tr> <tr><td>Cell 1-1</td><td>Cell 1-2</td></tr>
<tr><td>Cell 2-1</td><td>Cell 2-2</td></tr>
<tr><td>Cell 3-1</td><td>Cell 3-2</td></tr>
<tr><td>Cell 4-1</td><td>Cell 4-2</td></tr>
<tr><td>Cell 5-1</td><td>Cell 5-2</td></tr>
<tr><td>Cell 22-1</td><td>Cell 22-2</td></tr>
<tr><td>Cell 22-1</td><td>Cell 22-2</td></tr>
<tr><td>Cell 22-1</td><td>Cell 22-2</td></tr> <tr><td>Cell 1-1</td><td>Cell 1-2</td></tr>
<tr><td>Cell 2-1</td><td>Cell 2-2</td></tr>
<tr><td>Cell 3-1</td><td>Cell 3-2</td></tr>
<tr><td>Cell 4-1</td><td>Cell 4-2</td></tr>
<tr><td>Cell 5-1</td><td>Cell 5-2</td></tr>
<tr><td>Cell 22-1</td><td>Cell 22-2</td></tr>
<tr><td>Cell 22-1</td><td>Cell 22-2</td></tr>
<tr><td>Cell 22-1</td><td>Cell 22-2</td></tr>
</table>
<a href="javascript:;" onclick="show('myTable');">Show All</a>
<br />
<a href="javascript:;" onclick="hideRow('myTable', 0);">Filter</a>
<script>
function show(tableId) {
var table = document.getElementById(tableId);
if (!table) return false;
var n = table.rows.length;
for (i = 0; i < n; i++) {
index = i;
table.rows[index].style.display = '';
}
}
function hideRow(tableId, index) {
var table = document.getElementById(tableId);
if (!table) return false;
var keyword = prompt("Enter your keyword");
if (table.innerHTML.indexOf(keyword) == -1) {
alert('No matched');
return false;
}
var n = table.rows.length;
for (i = 0; i < n; i++) {
index = i;
if (table.rows[index].innerHTML.indexOf(keyword) == -1) {
table.rows[index].style.display = 'none';
} else {
table.rows[index].style.display = '';
}
}
}
</script>
</body>
</html>
Title:
Using js to filter table data
Description:
<html> <body> <table border="1" id="myTable"> <tr><td>Cell 22-1</td><...
...
Rating:
4