• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 374
  • Last Modified:

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>

Open in new window

0
areyouready344
Asked:
areyouready344
  • 4
  • 3
1 Solution
 
leakim971PluritechnicianCommented:
Check this :
<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').hover(function(){
//            l = $(this).parents("table").find("tr").index(  $(this) );
//            $('.chighlight').removeClass('chighlight');
//            $(this).addClass('chighlight');
			$("td:contains('ddddddd')", this).each(function() {
				var currentHTML = $(this).html();
				var newHTML = currentHTML.replace("ddddddd","<span class=\"chighlight\">ddddddd</span>");
				$(this).html(newHTML);
			})

      }, function() { $(".chighlight").removeClass("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>

Open in new window

0
 
hieloCommented:
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>

Open in new window

0
 
areyouready344Author Commented:
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
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
areyouready344Author Commented:
Also leakim, the data leading up to the hypen within a table row can be any type of characters.
0
 
leakim971PluritechnicianCommented:
Have a look to the following :
<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(){
		$("td:contains(' - ')", this).each(function() {
			var currentHTML = $(this).html();
			var newHTML = currentHTML.replace(/.*\-/,function($1) { return "<span class=\"chighlight\">" + $1.substr(0,$1.length-2) + "</span> -"; });
			$(this).html(newHTML);
		})
	});
</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>aaaaa - cccccccccc</td></tr>
      <tr id='rowd' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>cccccdd - cccccccccc</td></tr>
      <tr id='rowe' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>feeeetetddd - cccccccccc</td></tr>
      <tr id='rowf' class="highlight"><td><input type="checkbox" name="vehicle"/></td><td>c</td><td>ddtttttdd - cccccccccc</td></tr>
</table>
</body>
</html>

Open in new window

0
 
areyouready344Author Commented:
once again, thanks a million Leakim971
0
 
areyouready344Author Commented:
excellent answer
0
 
leakim971PluritechnicianCommented:
You're welcome! Thanks for the points!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now