Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 305
  • Last Modified:

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

0
areyouready344
Asked:
areyouready344
  • 4
  • 3
1 Solution
 
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
 
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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
 
areyouready344Author Commented:
Leakim971, thanks again
0
 
areyouready344Author Commented:
excellent
0
 
leakim971PluritechnicianCommented:
You're welcome! Thanks @areyouready344!
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

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