jquery find text in table and highlight

The bellow article is for how to highlighting text into a webpage through java script you can try demo bellow just type words to the text box it will be highlighted in the table as yellow background color you can add you custom css for the highlighted text but the name of css class must be .highlighted.

Try Live Demo Here
WeekOff
WeekOff
OFF
PSPL-Application_Support
Support
coding and modification.
PSPL-Application_Support
Support
done coding and modification.
PSPL-ERM
Attendance
Coding and modification MyTeamLinkDetails.aspx
PSPL-ERM
Attendance
Coding and modification MyTeamLinkDetails.aspx
PSPL-ERM
Attendance
Coding and modification MyTeamLinkDetails.aspx
PSPL-SFA-Modifications
SFA Dashboards
Modification in graph add bl value
WeekOff
WeekOff
OFF
PSPL-SFA-Modifications
SFA Dashboards
Modification in Graphs add bl value
PSPL-SFA-Modifications
SFA Dashboards
Modification in dashboard adding bl value
WeekOff
WeekOff
OFF
Self Training
Self Training
Self Training


 How to use this code:-
1) copy and paste the two java script code given bellow inside the <head> tag.
2) call the function filterTable on onkeyup event of the textbox.
3) function filterTable use two parameters.


highlighting text and control client id (container id) in which we have to highlight the text. 

HTML Code

<input type="text" id="Stxt" onkeyup="filterTable(this,'table')"/>
  <table id="table" border="1">
     <tr>
        <td>
          //...........................
        </td>

Edit before use change control id (table) and change the background color as required.
JavaScript Code (Edit)
<style type="text/css">
    .highlighted
    {
       background-color:Yellow;
    }
</style>
<script type="text/javascript">

  function filterTable(Stxt, table) {
     dehighlight(document.getElementById(table));
     if (Stxt.value.length > 0)
       highlight(Stxt.value.toLowerCase(), document.getElementById(table));
  }
</script>

JavaScript Code (Don't Edit)
<script type="text/javascript">
/*
* Transform back each
* <span>preText <span class="highlighted">Stxt</span> postText</span>
* into its original
* preText Stxt postText
*/
function dehighlight(container) {
    for (var i = 0; i < container.childNodes.length; i++) {
        var node = container.childNodes[i];
        if (node.attributes && node.attributes['class']
&& node.attributes['class'].value == 'highlighted') {
            node.parentNode.parentNode.replaceChild(
document.createTextNode(
node.parentNode.innerHTML.replace(/<[^>]+>/g, "")),
node.parentNode);
            // Stop here and process next parent
            return;
        } else if (node.nodeType != 3) {
            // Keep going onto other elements
            dehighlight(node);
        }
    }
}
/*
* Create a
* <span>preText <span class="highlighted">Stxt</span> postText</span>
* around each search Stxt
*/
function highlight(Stxt, container) {
    for (var i = 0; i < container.childNodes.length; i++) {
        var node = container.childNodes[i];
        if (node.nodeType == 3) {
            // Text node
            var data = node.data;
            var data_low = data.toLowerCase();
            if (data_low.indexOf(Stxt) >= 0) {
                //Stxt found!
                var new_node = document.createElement('span');
                node.parentNode.replaceChild(new_node, node);
                var result;
                while ((result = data_low.indexOf(Stxt)) != -1) {
                    new_node.appendChild(document.createTextNode(
data.substr(0, result)));
                    new_node.appendChild(create_node(
document.createTextNode(data.substr(
result, Stxt.length))));
                    data = data.substr(result + Stxt.length);
                    data_low = data_low.substr(result + Stxt.length);
                }
                new_node.appendChild(document.createTextNode(data));
            }
        } else {
            // Keep going onto other elements
            highlight(Stxt, node);
        }
    }
}
function create_node(child) {
    var node = document.createElement('span');
    node.setAttribute('class', 'highlighted');
    node.attributes['class'].value = 'highlighted';
    node.appendChild(child);
    return node;
}
</script>

Recent Article