0

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
5
Views
5 Years
Discussion Span
Last Post by stbuchok
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>
0

Sorry for the *very* late reply!

This worked sweet, thanks bro.

Is it possible to change this to solved now?

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.