how to highlight certain data within a html table row leading up to a hyphen using jquery?

The code below will by default highlight characters leading up to the hyphen with a space between both sides of the hyphen. What I would like is to have only a space on the right side of the hyphen, for example,

dkdkdkdkd- dkdkdkdkdkd

currently, it has....

dkdkdkdkd - dkdkdkdkdkd

also, keep the styling the same
<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

areyouready344Asked:
Who is Participating?
 
leakim971PluritechnicianCommented:
line 34 fixed :
<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-1) + "</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
 
leakim971PluritechnicianCommented:
Line 32, replace : $("td:contains(' - ')", this).each(function() {
By: $("td:contains('- ')", this).each(function() {
0
 
leakim971PluritechnicianCommented:
<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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
areyouready344Author Commented:
I forgot the mention Leakim971, I tried that solution you gave but the problem is it cuts off the last character.

for example,

cccccdd- cccccccccc

it becomes,

cccccd- cccccccccc
0
 
areyouready344Author Commented:
Leakim971, thanks again
0
 
areyouready344Author Commented:
excellent
0
 
leakim971PluritechnicianCommented:
You're welcome! Thanks @areyouready344!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.