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 :-

1) How to make fixed header in scrollabel Gridview in asp.net
Click Here

2) Making static header (fixed header) in HTML table through javascript Click Here

Recent Article