Toggle Row Color

Gil Davis Feb 28, 2007

General

Using checkboxes, this script will highlight/unhighlight rows in a table. Useful for selections in data tables. Very simple.

Notes

Created by: Gil Davis | ayse incebulut
Web Site: WebDeveloper.com Forum
Posted: February 28, 2007

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: toggleRowColor.js

/* This script and many more are available free online at
The JavaScript Source!! http://www.javascriptsource.com
Created by: Gil Davis | ayse incebulut | http://www.webdeveloper.com/forum/showthread.php?p=717824#post717824 */
function check(it) {
  tr = it.parentNode.parentNode;
  tr.style.backgroundColor = (it.checked) ? "gold" : "white";
}

CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.

tr.row {
  color: #cc3333;
  background-color: white;
}

td.col {
  border: 1px solid blue;
  padding: 5px;
}

table.test {
  text-align: center;
  width: 340px;
  margin-left: 30%
}

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="toggleRowColor.js"></script>

Body

Paste this code into the BODY section of your HTML document


<form onsubmit="return false">
<table class="test">
<tr class="row"><td class="col"><input type="checkbox" onclick="check(this)"></td><td class="col">testing!</td><td class="col">testing!</td></tr>
<tr class="row"><td class="col"><input type="checkbox" onclick="check(this)"></td><td class="col">testing!</td><td class="col">testing!</td></tr>
<tr class="row"><td class="col"><input type="checkbox" onclick="check(this)"></td><td class="col">testing!</td><td class="col">testing!</td></tr>
<tr class="row"><td class="col"><input type="checkbox" onclick="check(this)"></td><td class="col">testing!</td><td class="col">testing!</td></tr>
</table>
</form>

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details