how to highlight certain data within a html table row using jquery?
how to highlight certain data within a html table row using jquery? For example, in the attached table code I would like to make value of ddddddd with a background-color of #408080 and text color white while cccccccccccccc remains with the background-color of white and text color black.
<title>Untitled</title>
<style type="text/css">
.chighlight
{
background-color:#408080;
color:white;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery-1.1.3.1.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.dimensions.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.cookies.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.iutil.pack.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.idrag.js"></script>
<script type="text/javascript" src="http://www.ita.es/jquery/jquery.grid.columnSizing.js"></script>
<script type="text/javascript">
$(function()
{
$("table").columnSizing()
$('input[type=checkbox]').bind('click change',function(){
if( this.checked )
{
var row=$(this).closest('tr');
alert( row.attr('id') );
alert( $('td:eq(1)', row).html() )//second cell
alert( $('td:eq(2)', row).html() )//third cell
}
});
});
$(document).ready(function(){
$('.highlight').mouseover(function(){
l = $(this).parents("table").find("tr").index( $(this) );
$('.chighlight').removeClass('chighlight');
$(this).addClass('chighlight');
});
l = -1;
$(document).keyup(function(e) {
if(e.keyCode == 38) {
if(--l<0) {
l = 0;
}
$("tr","table").removeClass('chighlight');
$("tr:eq(" + l + ")","table").addClass('chighlight');
}
else if(e.keyCode == 40) {
if(++l>$("tr", "table").length-1) {
l = $("tr", "table").length-1;
}
$("tr","table").removeClass('chighlight');
$("tr:eq(" + l + ")","table").addClass('chighlight');
}
else if(e.keyCode == 32) {
$("input[type='checkbox'][name='vehicle']", "tr.chighlight").focus().click();
}
})
});
</script>
</head>
<body>
<table id="theTable" border='1'>
<tr id='rowa' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>a</td><td>b</td></tr>
<tr id='rowb' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>ddddddd - cccccccccc</td></tr>
<tr id='rowc' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>dddddddd - cccccccccc</td></tr>
<tr id='rowd' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>dddddddd - cccccccccc</td></tr>
<tr id='rowe' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>dddddddd - cccccccccc</td></tr>
<tr id='rowf' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>dddddddd - cccccccccc</td></tr>
</table>
</body>
</html>
you will need to wrap your "ddddddddd" with some element -ex:
<tr id='rowb' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td><span>ddddddd</span> - cccccccccc</td></tr>
<tr id='rowc' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td><span>dddddddd</span> - cccccccccc</td></tr>
<tr id='rowd' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td><span>dddddddd</span> - cccccccccc</td></tr>
<tr id='rowe' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td><span>dddddddd</span> - cccccccccc</td></tr>
<tr id='rowf' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td><span>dddddddd</span> - cccccccccc</td></tr>
and then
a. write a css style for it:
<style type="text/css">
tr.highlight td span{
background-color:#408080;
color:white;
}
</style>
b. You can do the same via jQuery as needed - for example, upon "load":
<script type="text/javascript">
$(function(){
$('tr.highlight td span').css({backgroundColor:'#408080',color:'white'});
});
</script>ASKER
my lucky day, where have u been? After trying your code solution, it appears I asked the wrong question. For readability reasons and by default (after the page is loaded), all text leading to the hyphen (ddddddd - cccccccccc) in the table rows should be highlighted, in this case dddddddd should be background-color:#408080 and color:white
ASKER
Also leakim, the data leading up to the hypen within a table row can be any type of characters.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
once again, thanks a million Leakim971
ASKER
excellent answer
You're welcome! Thanks for the points!
Open in new window