How to make find and search functionality in html table through javascript
I have search a lot of article for how to make search in HTML table but i didn't find any good article so i wrote my own article for that, Here is a script given bellow for how to make search in HTML table the question is that how to use this code so here is the step by step instructions :-
- Copy and paste JavaScript code inside <head> tag.
- Add Text box at the header row ( first row ) of your table in which you want to add functionality search.
- Call the function searchRows at the onkeyup event of the text box.
- Pass the parameter Table Client Id at the function searchRows.
How it works :-
When we search by typing some word in text box , function searchrows called and it navigate particular that column ,search the text if cell contains lable (span) then it take value of it otherwise direct cell text and if this text not matched from the given text ,set the visibility of container row false.
JavaScript Code
<script type="text/javascript">
function
searchRows(tblId) {
var tbl
= document.getElementById(tblId);
var
headRow = tbl.rows[0];
var
arrayOfHTxt = new Array();
var
arrayOfHtxtCellIndex = new Array();
for (var v = 0; v < headRow.cells.length; v++) {
if
(headRow.cells[v].getElementsByTagName('input')[0])
{
var Htxtbox =
headRow.cells[v].getElementsByTagName('input')[0];
if
(Htxtbox.value.replace(/^\s+|\s+$/g, '') != '') {
arrayOfHTxt.push(Htxtbox.value.replace(/^\s+|\s+$/g, ''));
arrayOfHtxtCellIndex.push(v);
}
}
}
for (var i = 1; i < tbl.rows.length; i++) {
tbl.rows[i].style.display = 'table-row';
for (var v = 0; v < arrayOfHTxt.length; v++) {
var
CurCell = tbl.rows[i].cells[arrayOfHtxtCellIndex[v]];
var
CurCont = CurCell.innerHTML.replace(/<[^>]+>/g, "");
var reg
= new RegExp(arrayOfHTxt[v] + ".*", "i");
if
(CurCont.match(reg) == null) {
tbl.rows[i].style.display = 'none';
}
}
}
}
</script>
Header row how to add searchrows function in text box :-
HTML Code
<table id="tblS" style="background-color:Aqua;"
border="2">
<tr style="background-color:#FFEFC6; height:55px">
<th scope="col">
Project Name
<input id="txtPrjName" onkeyup="searchRows('tblS')" type="text"/>
</th>
//...................................................
Type in text box and search and see how it works :-
Try Live Demo Here| Project Name | TaskName | EntryDate | Remarks |
|---|---|---|---|
| PSPL-Application_Support | Support | 25 Oct 2011 | done coding and modification. |
| PSPL-Application_Support | Support | 24 Oct 2011 | Coding and Modification. |
| WeekOff | WeekOff | 23 Oct 2011 | OFF |
| PSPL-Application_Support | Support | 22 Oct 2011 | coding and modification. |
| PSPL-Application_Support | Support | 21 Oct 2011 | done coding and modification. |
| PSPL-ERM | OAA | 20 Oct 2011 | Coding and Modification OAAReport |
| PSPL-ERM | OAA | 19 Oct 2011 | Coding and Modification OAAReport |
| PSPL-ERM | OAA | 18 Oct 2011 | Coding and Modification OAAReport |
| PSPL-Application_Support | Support | 17 Oct 2011 | done coding and modification. |
| WeekOff | WeekOff | 16 Oct 2011 | OFF |
| PSPL-ERM | Payslip Mail | 15 Oct 2011 | done coding for paymail slip. |
| PSPL-ERM | Payslip Mail | 14 Oct 2011 | done coding for paymail slip. |
| PSPL-ERM | Payslip Mail | 13 Oct 2011 | done coding for paymail slip. |
| PSPL-ERM | OAA | 12 Oct 2011 | done coding and modfication. |
| PSPL-ERM | OAA | 11 Oct 2011 | done coding and modfication. |
| PSPL-ERM | OAA | 10 Oct 2011 | done coding and modfication. |
| WeekOff | WeekOff | 09 Oct 2011 | OFF |
| Self Training | Self Training | 08 Oct 2011 | Self Study |
| PSPL-ERM | Attendance | 07 Oct 2011 | Coding and Modification in Attendancedetails.aspx.cs |
| PSPL-ERM | OAA | 06 Oct 2011 | done coding and modification |
| PSPL-ERM | Attendance | 05 Oct 2011 | Coding and Modification in Attendancedetails.aspx.cs |
| PSPL-ERM | Attendance | 04 Oct 2011 | Coding and Modification in Attendancedetails.aspx.cs |
| PSPL-ERM | Attendance | 03 Oct 2011 | Coding and Modification in Attendancedetails.aspx.cs |
| WeekOff | WeekOff | 02 Oct 2011 | OFF |
| PSPL-ERM | Attendance | 01 Oct 2011 | Coding and Modification in Attendancedetails.aspx.cs |
| PSPL-ERM | Attendance | 30 Sep 2011 | Coding and Modification in Attendancedetails.aspx.cs |
| PSPL-ERM | Attendance | 29 Sep 2011 | Modification in EmpAttendance.ascx |
| PSPL-ERM | Attendance | 28 Sep 2011 | Modification in EmpAttendance.ascx |
| PSPL-ERM | Attendance | 27 Sep 2011 | Modification in EmpAttendance.ascx |
| PSPL-ERM | Attendance | 26 Sep 2011 | Coding and Modification EmployeeAttendenceReport |
| WeekOff | WeekOff | 25 Sep 2011 | OFF |
| PSPL-ERM | Attendance | 24 Sep 2011 | Coding and Modification EmployeeAttendenceReport |
| PSPL-ERM | Attendance | 23 Sep 2011 | Coding and modification MyTeamLinkDetails.aspx |
| PSPL-ERM | Attendance | 22 Sep 2011 | Coding and modification MyTeamLinkDetails.aspx |
| PSPL-ERM | Attendance | 21 Sep 2011 | Coding and modification MyTeamLinkDetails.aspx |
| PSPL-SFA-Modifications | SFA Dashboards | 19 Sep 2011 | Modification in graph add bl value |
| WeekOff | WeekOff | 18 Sep 2011 | OFF |
| PSPL-SFA-Modifications | SFA Dashboards | 17 Sep 2011 | Modification in Graphs add bl value |
| PSPL-SFA-Modifications | SFA Dashboards | 16 Sep 2011 | Modification in Graphs add bl value |
| PSPL-SFA-Modifications | SFA Dashboards | 15 Sep 2011 | Modification in dashboard adding bl value |
| PSPL-SFA-Modifications | SFA Dashboards | 14 Sep 2011 | Modification in dashboard adding bl value |
| PSPL-SFA-Modifications | SFA Dashboards | 13 Sep 2011 | Modification in dashboard adding bl value |
| PSPL-SFA-Modifications | SFA Dashboards | 12 Sep 2011 | Modification in dashboard adding bl value |
| WeekOff | WeekOff | 11 Sep 2011 | OFF |
| Self Training | Self Training | 10 Sep 2011 | Self Training |
| PSPL-TimeTracker | KRA Module | 09 Sep 2011 | Coding and modification on View Point |
| PSPL-TimeTracker | KRA Module | 08 Sep 2011 | Coding and modification on View Point |
| PSPL-TimeTracker | KRA Module | 07 Sep 2011 | Coding and modification on View Point |
| PSPL-TimeTracker | KRA Module | 06 Sep 2011 | Coding and modification on View Point |
| PSPL-TimeTracker | KRA Module | 05 Sep 2011 | Creating a new page View Point |
| PSPL-ERM | OAA | 04 Sep 2011 | Coding and Modification |
| PSPL-ERM | OAA | 03 Sep 2011 | Coding and Modification |
| PSPL-ERM | OAA | 02 Sep 2011 | Coding and Modification |
| PSPL-ERM | OAA | 01 Sep 2011 | Coding and Modification |
| PSPL-ERM | OAA | 31 Aug 2011 | Coding and Modification |
| PSPL-ERM | OAA | 30 Aug 2011 | Coding and Modification |
You may also like :-
2) Making static header (fixed header) in HTML table through javascript Click Here
