Skip to main content

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>

Popular posts from this blog

Merging multiple PDFs using iTextSharp in asp.net c#

In this article i will show you how to merge multiple pdfs into one using ITextSharp below is the two approach one is to pass your input files path, output file path (will be created if not exist) and another is pass direct input stream, output stream and it will write the merge files into output stream.

how $document.ready() is different from window.onload()

we often use window.onload() in javascript and $document.ready() in jquery and assume that both are same just jquery library wrap up javascript window.onload() and introduce $document.ready() but no there is much difference between them below is the explanation -

Uploading large file in chunks in Asp.net Mvc c# from Javascript ajax

Often we have a requirement to upload files in Asp.net, Mvc c# application but when it comes to uploading larger file, we always think how to do it as uploading large file in one go have many challenges like UI responsiveness, If network fluctuate for a moment in between then uploading task get breaks and user have to upload it again etc.

Scrollable Gridview with fixed headers in asp.net

horizontal and vertical scrollable Gridview with static header row.fixed header in gridview in asp.net.static header in gridview through java script.I was looking for a solution for this for a long time and found most of the answers are not working or not suitable for my situation i also find most of the java script code for that they worked but only with the vertical scroll not with the horizontal scroll and also combination of header and rows doesn't match.

How to handle click event of linkbutton inside gridview

Recently I have posted how to sort only current page of gridview, Scrollble gridview with fixed header through javascript, File upload control inside gridview during postback and now i am going to explain how to handle click event of linkbutton or any button type control inside gridview.

We can handle click event of any button type control inside gridview by two way first is through event bubbling and second one is directly (in this type of event handling we need to access current girdviewrow container)