CODEWITHSUNDEEP
javascriptjquerygoogle-chromemozilla
Piyush
Piyush

Reputation: 4007

Highlight row when clicked on button

I am using following script to highlight row when I clicked edit button of that row. I am passing Id of row when I click on button! My problem is the code is working in Mozila Firefox but not on Google Chrome. What is wrong in following code.

function high(id)
{
    $('tr').removeAttr('style'); 
    document.getElementById(id).style="background-color:#eeeeea;color:#000000;font-weight:500;";
}

Upvotes: 1

Views: 2424

Answers (3)

arshovon
arshovon

Reputation: 13661

Here is a demo to add special class to the editing row and remove the class on the other rows. This is done using the closest() method of jquery. You even do not need to use any id for this. 

$("button").on("click",function(){
		$("tr").each(function(){
			$(this).removeClass("marked");
		});
		$(this).closest("tr").addClass("marked");
	});
	.marked{
		background-color:#eeeeea;color:#000000;font-weight:500;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<table>
		<tr>
			<td>This is TD</td>
			<td><button>Edit</button></td>
		</tr>
		<tr>
			<td>This is TD</td>
			<td><button>Edit</button></td>
		</tr>
		<tr>
			<td>This is TD</td>
			<td><button>Edit</button></td>
		</tr>
	</table>

Upvotes: 2

Satpal
Satpal

Reputation: 133423

You need to set properties of style object individually. 

var elem = document.getElementById(id);
//Set properties
elem.style.color = "#000000";
elem.style.fontWeight = "500";
elem.style.backgroundColor = "#eeeeea";

Since you are using , You can use .css()

$('#' + id).css({
    "background-color" :"#eeeeea",
    "color":"#000000",
    "font-weight":"500";
});

However, I would recommend you to create a CSS class then use it.

$('tr').removeClass('highlight'); 
$('#' + id).addClass('highlight');

Upvotes: 2

Rohan Kumar
Rohan Kumar

Reputation: 40639

Try this,

$('#'+id).attr("style","background-color:#eeeeea;color:#000000;font-weight:500;");

Working on chrome also.

The reason, can be style is an object which has some properties in it and chrome may not allow to overwrite it. So the custom string you passed in style will not apply to it, hence no changes applied to the element.

Upvotes: 2

Related Questions