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

Regular expression for alphanumeric with space in asp.net c#

How to validate that string contains only alphanumeric value with some spacial character and with whitespace and how to validate that user can only input alphanumeric with given special character or space in a textbox (like name fields or remarks fields). In remarks fields we don't want that user can enter anything, user can only able to enter alphanumeric with white space and some spacial character like -,. etc if you allow. Some of regular expression given below for validating alphanumeric value only, alphanumeric with whitspace only and alphanumeric with whitespace and some special characters.

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)

regex - check if a string contains only alphabets c#

How to validate that input string contains only alphabets, validating that textbox contains only alphabets (letter), so here is some of the ways for doing such task. char have a property named isLetter which is for checking if character is a letter or not, or you can check by the regular expression  or you can validate your textbox through regular expression validator in asp.net. Following code demonstrating the various ways of implementation.

How to validate dropdownlist in JavaScript

In this article you will see how to put validation in dropdownlist by javascript, suppose first item value of dropdownlist is 0 and text is "-Select-" just like given below and we have to validate that at least one item is selected excluding default i.e "-Select-".

Refreshing page in Javascript

In this article we will see that how to refresh or reload a page through Java Script there are a lot of ways to refresh or reload a document depending how we want (from server side