Member Avatar for webblar

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
  • 2K Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by stbuchok

Recommended Answers

All 3 Replies

Member Avatar for stbuchok

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>
Member Avatar for webblar

Sorry for the *very* late reply!

This worked sweet, thanks bro.

Is it possible to change this to solved now?

Member Avatar for stbuchok

I believe you are the only one who can mark it as solved.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.