Thursday 1 December 2011

Searching in HTML table with 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.getElementsByTagName('span')[0];
    var reg = new RegExp(arrayOfHTxt[v] + ".*", "i");
    if (!CurCont) {
        CurCont = tbl.rows[i].cells[arrayOfHtxtCellIndex[v]];
    }
    if (CurCont.innerHTML.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 NameTaskNameEntryDateRemarks
PSPL-Application_SupportSupport25 Oct 2011done coding and modification.
PSPL-Application_SupportSupport24 Oct 2011Coding and Modification.
WeekOffWeekOff23 Oct 2011OFF
PSPL-Application_SupportSupport22 Oct 2011coding and modification.
PSPL-Application_SupportSupport21 Oct 2011done coding and modification.
PSPL-ERMOAA20 Oct 2011Coding and Modification OAAReport
PSPL-ERMOAA19 Oct 2011Coding and Modification OAAReport
PSPL-ERMOAA18 Oct 2011Coding and Modification OAAReport
PSPL-Application_SupportSupport17 Oct 2011done coding and modification.
WeekOffWeekOff16 Oct 2011OFF
PSPL-ERMPayslip Mail15 Oct 2011done coding for paymail slip.
PSPL-ERMPayslip Mail14 Oct 2011done coding for paymail slip.
PSPL-ERMPayslip Mail13 Oct 2011done coding for paymail slip.
PSPL-ERMOAA12 Oct 2011done coding and modfication.
PSPL-ERMOAA11 Oct 2011done coding and modfication.
PSPL-ERMOAA10 Oct 2011done coding and modfication.
WeekOffWeekOff09 Oct 2011OFF
Self TrainingSelf Training08 Oct 2011Self Study
PSPL-ERMAttendance07 Oct 2011Coding and Modification in Attendancedetails.aspx.cs
PSPL-ERMOAA06 Oct 2011done coding and modification
PSPL-ERMAttendance05 Oct 2011Coding and Modification in Attendancedetails.aspx.cs
PSPL-ERMAttendance04 Oct 2011Coding and Modification in Attendancedetails.aspx.cs
PSPL-ERMAttendance03 Oct 2011Coding and Modification in Attendancedetails.aspx.cs
WeekOffWeekOff02 Oct 2011OFF
PSPL-ERMAttendance01 Oct 2011Coding and Modification in Attendancedetails.aspx.cs
PSPL-ERMAttendance30 Sep 2011Coding and Modification in Attendancedetails.aspx.cs
PSPL-ERMAttendance29 Sep 2011Modification in EmpAttendance.ascx
PSPL-ERMAttendance28 Sep 2011Modification in EmpAttendance.ascx
PSPL-ERMAttendance27 Sep 2011Modification in EmpAttendance.ascx
PSPL-ERMAttendance26 Sep 2011Coding and Modification EmployeeAttendenceReport
WeekOffWeekOff25 Sep 2011OFF
PSPL-ERMAttendance24 Sep 2011Coding and Modification EmployeeAttendenceReport
PSPL-ERMAttendance23 Sep 2011Coding and modification MyTeamLinkDetails.aspx
PSPL-ERMAttendance22 Sep 2011Coding and modification MyTeamLinkDetails.aspx
PSPL-ERMAttendance21 Sep 2011Coding and modification MyTeamLinkDetails.aspx
PSPL-SFA-ModificationsSFA Dashboards19 Sep 2011Modification in graph add bl value
WeekOffWeekOff18 Sep 2011OFF
PSPL-SFA-ModificationsSFA Dashboards17 Sep 2011Modification in Graphs add bl value
PSPL-SFA-ModificationsSFA Dashboards16 Sep 2011Modification in Graphs add bl value
PSPL-SFA-ModificationsSFA Dashboards15 Sep 2011Modification in dashboard adding bl value
PSPL-SFA-ModificationsSFA Dashboards14 Sep 2011Modification in dashboard adding bl value
PSPL-SFA-ModificationsSFA Dashboards13 Sep 2011Modification in dashboard adding bl value
PSPL-SFA-ModificationsSFA Dashboards12 Sep 2011Modification in dashboard adding bl value
WeekOffWeekOff11 Sep 2011OFF
Self TrainingSelf Training10 Sep 2011Self Training
PSPL-TimeTrackerKRA Module09 Sep 2011Coding and modification on View Point
PSPL-TimeTrackerKRA Module08 Sep 2011Coding and modification on View Point
PSPL-TimeTrackerKRA Module07 Sep 2011Coding and modification on View Point
PSPL-TimeTrackerKRA Module06 Sep 2011Coding and modification on View Point
PSPL-TimeTrackerKRA Module05 Sep 2011Creating a new page View Point
PSPL-ERMOAA04 Sep 2011Coding and Modification
PSPL-ERMOAA03 Sep 2011Coding and Modification
PSPL-ERMOAA02 Sep 2011Coding and Modification
PSPL-ERMOAA01 Sep 2011Coding and Modification
PSPL-ERMOAA31 Aug 2011Coding and Modification
PSPL-ERMOAA30 Aug 2011Coding and Modification
Project NameTaskNameEntryDateRemarks
PSPL-Application_SupportSupport25 Oct 2011done coding and modification.
PSPL-Application_SupportSupport24 Oct 2011Coding and Modification.
WeekOffWeekOff23 Oct 2011OFF
PSPL-Application_SupportSupport22 Oct 2011coding and modification.
PSPL-Application_SupportSupport21 Oct 2011done coding and modification.
PSPL-ERMOAA20 Oct 2011Coding and Modification OAAReport
PSPL-ERMOAA19 Oct 2011Coding and Modification OAAReport
PSPL-ERMOAA18 Oct 2011Coding and Modification OAAReport
PSPL-Application_SupportSupport17 Oct 2011done coding and modification.
WeekOffWeekOff16 Oct 2011OFF
PSPL-ERMPayslip Mail15 Oct 2011done coding for paymail slip.
PSPL-ERMPayslip Mail14 Oct 2011done coding for paymail slip.
PSPL-ERMPayslip Mail13 Oct 2011done coding for paymail slip.
PSPL-ERMOAA12 Oct 2011done coding and modfication.
PSPL-ERMOAA11 Oct 2011done coding and modfication.
PSPL-ERMOAA10 Oct 2011done coding and modfication.
WeekOffWeekOff09 Oct 2011OFF
Self TrainingSelf Training08 Oct 2011Self Study
PSPL-ERMAttendance07 Oct 2011Coding and Modification in Attendancedetails.aspx.cs
PSPL-ERMOAA06 Oct 2011done coding and modification
PSPL-ERMAttendance05 Oct 2011Coding and Modification in Attendancedetails.aspx.cs
PSPL-ERMAttendance04 Oct 2011Coding and Modification in Attendancedetails.aspx.cs
PSPL-ERMAttendance03 Oct 2011Coding and Modification in Attendancedetails.aspx.cs
WeekOffWeekOff02 Oct 2011OFF
PSPL-ERMAttendance01 Oct 2011Coding and Modification in Attendancedetails.aspx.cs
PSPL-ERMAttendance30 Sep 2011Coding and Modification in Attendancedetails.aspx.cs
PSPL-ERMAttendance29 Sep 2011Modification in EmpAttendance.ascx
PSPL-ERMAttendance28 Sep 2011Modification in EmpAttendance.ascx
PSPL-ERMAttendance27 Sep 2011Modification in EmpAttendance.ascx
PSPL-ERMAttendance26 Sep 2011Coding and Modification EmployeeAttendenceReport
WeekOffWeekOff25 Sep 2011OFF
PSPL-ERMAttendance24 Sep 2011Coding and Modification EmployeeAttendenceReport
PSPL-ERMAttendance23 Sep 2011Coding and modification MyTeamLinkDetails.aspx
PSPL-ERMAttendance22 Sep 2011Coding and modification MyTeamLinkDetails.aspx
PSPL-ERMAttendance21 Sep 2011Coding and modification MyTeamLinkDetails.aspx
PSPL-SFA-ModificationsSFA Dashboards19 Sep 2011Modification in graph add bl value
WeekOffWeekOff18 Sep 2011OFF
PSPL-SFA-ModificationsSFA Dashboards17 Sep 2011Modification in Graphs add bl value
PSPL-SFA-ModificationsSFA Dashboards16 Sep 2011Modification in Graphs add bl value
PSPL-SFA-ModificationsSFA Dashboards15 Sep 2011Modification in dashboard adding bl value
PSPL-SFA-ModificationsSFA Dashboards14 Sep 2011Modification in dashboard adding bl value
PSPL-SFA-ModificationsSFA Dashboards13 Sep 2011Modification in dashboard adding bl value
PSPL-SFA-ModificationsSFA Dashboards12 Sep 2011Modification in dashboard adding bl value
WeekOffWeekOff11 Sep 2011OFF
Self TrainingSelf Training10 Sep 2011Self Training
PSPL-TimeTrackerKRA Module09 Sep 2011Coding and modification on View Point
PSPL-TimeTrackerKRA Module08 Sep 2011Coding and modification on View Point
PSPL-TimeTrackerKRA Module07 Sep 2011Coding and modification on View Point
PSPL-TimeTrackerKRA Module06 Sep 2011Coding and modification on View Point
PSPL-TimeTrackerKRA Module05 Sep 2011Creating a new page View Point
PSPL-ERMOAA04 Sep 2011Coding and Modification
PSPL-ERMOAA03 Sep 2011Coding and Modification
PSPL-ERMOAA02 Sep 2011Coding and Modification
PSPL-ERMOAA01 Sep 2011Coding and Modification
PSPL-ERMOAA31 Aug 2011Coding and Modification
PSPL-ERMOAA30 Aug 2011Coding and Modification




Posted by at 20:36

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)