Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Making a row highlighted when clicked

Making a row highlighted when clicked

Problem

I'd like to add functionality to my html page to highlight (change the row color to #DFDFDF) when selected.

If another row is selected then, then return the row color to its initial color and color the newly selected row.

Note that when the top header is clicked, id like to exempt that from ever changing color.

Here is the fiddle: http://jsfiddle.net/q42L2/

Much thanks and appreciation for all of your help

File Number Date1 Date2 Status Num.
KABC 09/12/2002 09/12/2002 Submitted 0
KCBS 09/11/2002 09/11/2002 Lockdown 2
WFLA 09/11/2002 09/11/2002 Submitted 1
WTSP 09/15/2002 09/15/2002 In-Progress 10
WROC 10/11/2002 10/11/2002 Submitted 12
WPPP 09/16/2002 09/16/2002 In-Progress 0
WRRR 09/06/2002 09/06/2002 Submitted 5
WTTT 09/21/2002 09/21/2002 In-Progress 0
W000 11/11/2002 11/11/2002 Submitted 7
KABC 10/01/2002 10/01/2002 Submitted 10
KCBS 10/18/2002 10/18/2002 Lockdown 2
WFLA 10/18/2002 10/18/2002 Submitted 1
WTSP 10/19/2002 10/19/2002 In-Progress 0
WROC 07/18/2002 07/18/2002 Submitted 2
WPPP 10/28/2002 10/28/2002 In-Progress 10
WRRR 10/28/2002 10/28/2002 Submitted 5
WTTT 10/08/2002 10/08/2002 In-Progress 0
WIL0 10/18/2001 10/18/2001 Submitted 7
KABC 04/18/2002 04/18/2002 Submitted 0
KCBS 10/05/2001 10/05/2001 Lockdown 2
WFLA 10/18/2002 10/18/2002 Submitted 1
WTSP 10/19/2002 10/19/2002 In-Progress 0
WROC 12/18/2002 12/18/2002 Submitted 2
WPPP 12/28/2002 12/28/2002 In-Progress 8
WRRR 12/20/2002 12/20/2002 Submitted 5
WTTT 12/11/2002 12/11/2002 In-Progress 0
W0VB 01/18/2003 01/18/2003 Submitted 17
KABC 12/17/2002 12/17/2002 Submitted 20
KCBS 12/16/2002 12/16/2002 Lockdown 2
WFAA 12/18/2002 12/18/2002 Submitted 1
WTSP 12/18/2002 12/18/2002 In-Progress 0
WROC 12/19/2002 12/19/2002 Submitted 2
WPPP 12/06/2002 12/06/2002 In-Progress 0
WRRR 12/28/2002 12/28/2002 Submitted 5
WTTT 12/30/2002 12/30/2002 In-Progress 0
UMBA 12/26/2002 12/26/2002 Submitted 7
KABC 12/18/2002 12/18/2002 Submitted 0
KCBS 12/29/2002 12/29/2002 Lockdown 2
WFFF 12/22/2002 12/22/2002 Submitted 1
WTSP 12/18/2001 12/18/2001 In-Progress 9
WROC 11/19/2001 11/19/2001 Submitted 2
WPPP 11/20/2001 11/20/2001 In-Progress 0
WRRR 10/19/2001 10/19/2001 Submitted 5
WTTT 11/29/2001 11/29/2001 In-Progress 8
KPLT 11/19/2001 11/19/2001 Submitted 7
KABC 11/19/2001 11/19/2001 Submitted 13
KBRE 11/19/2001 11/19/2001 Lockdown 2
WFLA 11/19/2001 11/19/2001 Submitted 1
WTSP 02/19/2003 02/19/2003 In-Progress 0
WROC 02/17/2003 02/17/2003 Submitted 2
WPPP 02/16/2003 02/16/2003 In-Progress 16
WRRR 02/29/2003 02/29/2003 Submitted 5
WTTT 03/19/2003 03/19/2003 In-Progress 19
KLTR 02/10/2003 02/10/2003 Submitted 7
KABC 04/05/2003 04/05/2003 Submitted 16
KCBS 02/19/2003 02/19/2003 Lockdown 2
WFLA 02/16/2003 02/16/2003 Submitted 1
WTSP 02/13/2003 02/13/2003 In-Progress 5
WROC 02/14/2003 02/14/2003 Submitted 2
WPPP 03/19/2003 03/19/2003 In-Progress 0
WRRR 02/19/2002 02/19/2002 Submitted 5
WTTT 02/19/2002 02/19/2002 In-Progress 0
WYYD 02/11/2002 02/11/2002 Submitted 7
KABC 02/19/2002 02/19/2002 Submitted 11
KCBS 02/19/2002 02/19/2002 Lockdown 12
WFLA 05/19/2002 05/19/2002 Submitted 1
WTSP 02/20/2002 02/20/2002 In-Progress 0
WROC 05/20/2002 05/20/2002 Submitted 2
WPPP 02/19/2003 02/19/2003 In-Progress 13
WRRR 02/19/2002 02/19/2002 Submitted 5
Problem courtesy of: user1959234

Solution

Try starting with this (untested). It should point you in the correct direction, all you need to do is include this after the table is created by deferring it or by calling initSelectableTable from the onload function. Make sure you set the id of your table to "SelectableTable".

var OldColour = "";
var SelectedRow = null;
var SelectedColour = "#DFDFDF";

initSelectableTable("SelectableTable");

function onCellClicked(cell) {
    if (cell.parentNode) {
        if (SelectedRow) SelectedRow.style.backgroundColor = OldColour;
        SelectedRow = cell.parentNode;
        OldColour = SelectedRow.style.backgroundColor;
        SelectedRow.style.backgroundColor = SelectedColour;     
    }
}

function initSelectableTable(tableid) {
    var elTable = document.getElementById(tableid);
    if (elTable) {
        var cells = elTable.getElementsByTagName("td");
        for (var i = 0; i 

Hope it helps...

Solution courtesy of: tunerscafe

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Making a row highlighted when clicked

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×