how to change the Html row colur on click

Question

5.00/5 (1 vote)

See more:

I have
a html table containing Rows as Below

<html>
<head></head>
<body>
<table>
<tr><td><a href="abcd.aspx">ABCD</></td>
</tr>
<tr><td><a href="xyz.aspx">XYZ</></td>
</tr>
</table>
</body>
</html>

this Table set on the Masterpage
Now I want that on click of link ABCD or XYZ
whole row must get selected and also the
colour of that selected rows must change
accordingly.
can this be done.How can i do this
please assist.

Posted 14-Oct-12 21:14pm

Karwa_Vivek

Add a Solution

3 solutions

Solution 2

I have tried tried the solution using JQuery/Javascript

jQuery

JavaScript

$('td').click(function() {
   $(this).css('backgroundColor', '#000');
});

...or....

$('table').on('click', 'td', function() {
   $(this).css('backgroundColor', '#000');
});

JavaScript

var td = document.getElementsByTagName('td');

var changeStyle = function (element) {
    element.style.backgroundColor = '#000';
}

for (var i = 0, length = td.length; i < length; i++) {

    if (td[i].addEventListener) {
        td[i].addEventListener("click", function() {
           changeStyle(td[i]);
        }, false); 
    } else if (td[i].attachEvent) {
        td[i].attachEvent("onclick", function() {
           changeStyle(td[i]);
        });
    } else {
        td[i].onclick = function() {
           changeStyle(td[i]);
        };
    }
}

...or...

JavaScript

var table = document.getElementsByTagName('table')[0];

var changeStyle = function(e) {
    e = e || window.event;
    var element = e.target || e.srcElement;
    element.style.backgroundColor = '#000';
}

if (table.addEventListener) {
    table.addEventListener("click", changeStyle, false);
} else if (table.attachEvent) {
    table.attachEvent("onclick", changeStyle);
} else {
    table.onclick = changeStyle;
}

jQuery

JavaScript

$('td').click(function() {
   $(this).addClass('active');
 );

...or....

$('table').on('click', 'td', function() {
   $(this).addClass('active');
});

CSS

td.active {
  background: #000;
}

The reason this didn't work...

<table><tbody><tr><td style="background-color:white">
     onclick="$(this).onmouseover('background-color','black')">
     SomeText
</td></tr></tbody></table>

Posted 14-Oct-12 21:31pm

Dhanamanikandan

Solution 4

put

function changeRowColor(obj)
{
$(obj).addClass('active');
}

hope this help

Posted 15-Oct-12 0:16am

bhargavpp

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ambesha · Accepted Answer · 2012-10-14T21:40:00

Solution 3

XML

<table>
  <tr>
    <td onclick="changeRowColor(this)">ABC
    </td>
  </tr>
  <tr>
    <td onclick="changeRowColor(this)">DEF
    </td>
  </tr>
  <tr>
    <td onclick="changeRowColor(this)">...
    </td>
  </tr>
  <tr>
    <td onclick="changeRowColor(this)">XYZ
    </td>
  </tr>
</table>

XML

<script type="text/javascript">
    function changeRowColor(currentRow) {
        $(currentRow).css('color', 'green'); // change clicked row to active color
        $(currentRow).parent().siblings().css('color', 'red'); // change all the rest to non active color
    }
</script>

Please refer JQuery Library in you page, and let me know if you have any query on the same

Thanks,
Ambesha

Posted 14-Oct-12 21:40pm

Ambesha

Comments

AshishChaudha 15-Oct-12 6:40am

my +5 Ambesha

Karwa_Vivek 16-Oct-12 6:43am

have some problem that
after clicking on other link the visited link is not resseting its colour.
wheres the problem

Karwa_Vivek 16-Oct-12 6:44am

Pasting my code here please help

<html>
<head>
<title></title>
<script type="text/javascript">
function changeRowColor(currentRow) {
$(currentRow).css('color', 'green'); // change clicked row to active color
$(currentRow).parent().siblings().css('color', 'red'); // change all the rest to non active color
}
</script>
<script type="text/javascript" src="Scripts/jquery.min.js"></script>
</head>
<body>
<table>
<tr>
<td önclick="changeRowColor(this)">ABC
</td>
</tr>
<tr>
<td önclick="changeRowColor(this)">DEF
</td>
</tr>
<tr>
<td önclick="changeRowColor(this)">...
</td>
</tr>
<tr>
<td önclick="changeRowColor(this)">XYZ
</td>
</tr>
</table>
</body>
</html>