If you have large amout of data in your table and its contain hundreds or thousands of rows and columns. One cannot expect users to keep scrolling vertically/horizontally for finding information of their interest.
My blog show you an easiest way to search through a html table using JavaScript.
First create TextBox inside the tag in Your HTML page. // where your can type value which you want to search.
<pre>Search Value <input type="text" id="search" onkeyup="Search()"placeholder="Type here for Search "/>
</pre>
Then Create Table inside which Contain your large Amout of Data. //data from database or any other source table look like this.
<table id="table_search" border="1" width="100%" cellspacing="0" cellpadding="5">
<thead>
<tr>
<th>Item ID</th>
<th>Item Name</th>
<th>Item Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>1002</td>
<td>Monitor</td>
<td>ML001</td>
</tr>
<tr>
<td>1003</td>
<td>Mouse</td>
<td>MO112</td>
</tr>
<tr>
<td>1004</td>
<td>LCD</td>
<td>LC102</td>
</tr>
</tbody>
</table>
if you done above code nicely the now time to magic code look below..
Put This JavaScrip Code inside tag in html or Below After end Tag
<script type="text/javascript">
function Search() {
var searchValue = document.getElementById('search').value; //get value from textBox by ID Field onkeyUp
var searchTable = document.getElementById('table_search'); //Search Value In Table search Table by Id
var searchColCount; //Column Counetr
//Loop through table rows
for (var rowIndex = 0; rowIndex < searchTable.rows.length; rowIndex++) {
var rowData = '';
//Get column count from header row
if (rowIndex == 0) {
searchColCount = searchTable.rows.item(rowIndex).cells.length;
continue; //do not execute further code for header row.
}
//Process data rows. (rowIndex >= 1)
for (var colIndex = 0; colIndex < searchColCount; colIndex++) {
rowData += searchTable.rows.item(rowIndex).cells.item(colIndex).textContent;
}
//If search term is not found in row data
//then hide the row, else show
if (rowData.indexOf(searchValue) == -1)
searchTable.rows.item(rowIndex).style.display = 'none';
else
searchTable.rows.item(rowIndex).style.display = 'table-row';
}
}
</script>
Complete Code..
<html>
<head>
<script type="text/javascript">
function Search() {
var searchValue = document.getElementById('search').value; //get value from textBox by ID Field onkeyUp function
var searchTable = document.getElementById('table_search'); //Search Value In Table search Table by Id
var searchColCount; //Column Counetr
//Loop through table rows
for (var rowIndex = 0; rowIndex < searchTable.rows.length; rowIndex++) {
var rowData = '';
//Get column count from header row
if (rowIndex == 0) {
searchColCount = searchTable.rows.item(rowIndex).cells.length;
continue; //do not execute further code for header row.
}
//Process data rows. (rowIndex >= 1)
for (var colIndex = 0; colIndex < searchColCount; colIndex++) {
rowData += searchTable.rows.item(rowIndex).cells.item(colIndex).textContent;
}
//If search term is not found in row data
//then hide the row, else show
if (rowData.indexOf(searchValue) == -1)
searchTable.rows.item(rowIndex).style.display = 'none';
else
searchTable.rows.item(rowIndex).style.display = 'table-row';
}
}
</script>
</head>
<body>
Search Value <input type="text" id="search" onkeyup="Search()" placeholder="Type here for Search "/></br></br>
<table id="table_search" border="1" width="100%" cellspacing="0" cellpadding="5">
<thead>
<tr>
<th>Item ID</th>
<th>Item Name</th>
<th>Item Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>1002</td>
<td>Monitor</td>
<td>ML001</td>
</tr>
<tr>
<td>1003</td>
<td>Mouse</td>
<td>MO112</td>
</tr>
<tr>
<td>1004</td>
<td>LCD</td>
<td>LC102</td>
</tr>
</tbody>
</table>
</body>
</html>
Hope it's Useful for You... :)
0 Comment(s)