jQuery onclick background change

I'm trying to get it so table cells within a row that are clicked on changes the background colour.

HTML code:

<table border="1" cellpadding="10">
    <tbody>
      <tr>
        <td>Hello World</td>
        <td>Hello World 2</td>
      </tr>
      <tr>
        <td>Hello World</td>
        <td>Hello World 2</td>
      </tr>
      <tr>
        <td>Hello World</td>
        <td>Hello World 2</td>
      </tr>
    </tbody>
  </table>

Script code:

$( function() {
  $('td').click( function() {
    $(this).parents('table').find('td').each( function( index, element ) {
        $(element).removeClass('on');
    } );
    $(this).addClass('on');
  } );
} );

The stylesheet has a .on class that changes the background colour when clicked.

It's working fine at the moment, but I'm trying to get it where multiple cells can be clicked and background changed, but only one cell per row.

I figure I need some classes within the tr/td tags in the table but not entirely sure the script code to work it, googled quite a few different things but not come across anything yet.

Any ideas appreciated.

2

Contributors

3

Replies

1 Week

Discussion Span

1 Year Ago

Last Updated

5

Views

webblar

Newbie Poster

10 posts since Feb 2012

Reputation Points: 10

Solved Threads: 0

Skill Endorsements: 0

1 Year Ago

0

Not sure, but I think this is what you want:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>Table Highlighting</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script>

$(function(){
	$('table').on('mouseover', 'tr', function(){
		$(this).css({
			'background-color': '#DBE9FF'
		});
	}).on('mouseout', 'tr', function(){
		$(this).css({
			'background-color': '#FFFFFF'
		});
	}).on('click', 'td', function(){
		$(this).parent().children().css({
			'background-color': '#FFFFFF'
		});

		$(this).css({
			'background-color': '#7DAFFF'
		});
	});
});

</script>

<style>

table
{
	border-collapse: collapse;
}

td
{
	padding: 5px;
	border: 1px solid #666666;
	cursor: pointer;
}

</style>

</head>

<body>

<table>
	<tr>
		<td>
		Row 1 Col 1
		</td>
		<td>
		Row 1 Col 2
		</td>
		<td>
		Row 1 Col 3
		</td>
		<td>
		Row 1 Col 4
		</td>
		<td>
		Row 1 Col 5
		</td>
	</tr>
	<tr>
		<td>
		Row 2 Col 1
		</td>
		<td>
		Row 2 Col 2
		</td>
		<td>
		Row 2 Col 3
		</td>
		<td>
		Row 2 Col 4
		</td>
		<td>
		Row 2 Col 5
		</td>
	</tr>
	<tr>
		<td>
		Row 3 Col 1
		</td>
		<td>
		Row 3 Col 2
		</td>
		<td>
		Row 3 Col 3
		</td>
		<td>
		Row 3 Col 4
		</td>
		<td>
		Row 3 Col 5
		</td>
	</tr>
	<tr>
		<td>
		Row 4 Col 1
		</td>
		<td>
		Row 4 Col 2
		</td>
		<td>
		Row 4 Col 3
		</td>
		<td>
		Row 4 Col 4
		</td>
		<td>
		Row 4 Col 5
		</td>
	</tr>
</table>

</body>
</html>

stbuchok

Practically a Posting Shark

875 posts since May 2011

Reputation Points: 138

Solved Threads: 124

Skill Endorsements: 2

1 Year Ago

0

Sorry for the *very* late reply!

This worked sweet, thanks bro.

Is it possible to change this to solved now?

webblar