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.
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
Edit before use change control id (table) and change the background color as required.
JavaScript Code (Edit)
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>
