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

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.

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)

What is NameSpace in .Net

This a basic question which allways asked in the interview that what is the namespace ,do you know about namespace,can you tell me some words about namespace.

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 -

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.