Change row table color with JavaScript

Question

I try to change the background of rows in my table with JavaScript but it's not working. This is my code. However I tried to create a table with html and its work. P.S : I want to use webkit.

Code :

var table = document.getElementById("tab");
var rowCount = table.rows.length;


for(var i=0;i<6;i++) {     
   row = table.insertRow(rowCount);
   row.id = "row"+i;
   cell1 = row.insertCell(0);
   var content = document.createElement("output");                
   content.innerHTML = i ;
   cell1.appendChild(content);
   rowCount++;
}


 $(document).ready(function(){
        $('td').each(function(i) {     
             $('#tab').on('click', '#row'+i, function(){
                document.getElementById("row"+i).style.background = 'white';
                 //alert(i);
             });   
        });   

     //example2
     $('#td1').on('click', function(){
                document.getElementById("td1").style.background = 'white';
             });   
 });

Don't "use webkit" - use the standards. And definitely don't use the outdated webkit gradient specification. — Dennis
– Dennis, Commented Dec 19, 2012 at 17:07

nybbler · Accepted Answer · 2012-12-19 17:02:13Z

2

The issue you're running into is because you are setting the background gradient on the TD, then setting the background color of the TR. Since the TD is within the TR, you're just not seeing your change be applied.

answered Dec 19, 2012 at 17:02

nybbler

4,87132 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mils Over a year ago

How can I add the TR with javaScript ?

nybbler Over a year ago

you could change the JS, or you could change the CSS. See this update to your fiddle for how to get what you want with updated CSS: jsfiddle.net/e2rYy/18

nybbler Over a year ago

@SlimMils Appreciate the accepted answer as updating the CSS does fix your problem, but you should accept and use Mike McCaughan's answer. It will perform better and keep your solution cleaner

Mils Over a year ago

@nybler: The solution that works more with my problem it's yours. I saw the answer of Mike and I thank him for his effort.

Heretic Monkey · Accepted Answer · 2012-12-19 17:06:50Z

2

You shouldn't assign event handlers in a loop, especially when you don't need to:

$('#tab').on('click', 'tr', function () {
    $('td,th', this).css('background', 'white');
});

fiddle.

answered Dec 19, 2012 at 17:06

Heretic Monkey

12.2k7 gold badges63 silver badges133 bronze badges

Comments

Christophe · Accepted Answer · 2012-12-19 16:58:59Z

1

It's backgroundColor, not background.

answered Dec 19, 2012 at 16:58

Christophe

28.3k29 gold badges104 silver badges145 bronze badges

2 Comments

John Fisher Over a year ago

@SlimMils: HTML, CSS, and the JavaScript DOM are different technologies. So, they can have different names for the same features.

Christophe Over a year ago

Just as @JohnFisher said. JavaScript uses camelCase (for example backgroundColor, instead of background-color in css).

Sushanth -- · Accepted Answer · 2012-12-19 17:06:09Z

1

First issue is the Closure Issue.. ..

The Click event will always point to the last instance of i .

Change your code to this

$('td').each(function(i) {
     (function(num) {
        $('#tab').on('click', '#row' + num, function() {
           document.getElementById("row" + num).style.background = '';
          //alert(i);
        });
     })(i)
 });

This might not be the main reason for the non functional code..

answered Dec 19, 2012 at 17:06

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Comments

axel.michel · Accepted Answer · 2012-12-19 17:10:41Z

0

Do you want to change the color of the complete row or the current cell? Your current selector would only apply to a specific cell.

// for the complete row
$(document).ready(function(){
    $('td').on('click',function(){
        $(this).closest('tr').find('td').css({'background':'red'});
    });
}); 

// or for the active cell..
$(document).ready(function(){
    $('td').on('click',function(){
        $(this).css({'background':'red'});
    });
});

See this fiddle http://jsfiddle.net/axelmichel/2KUCz/ for the row solution. In case you want a different behaviour for each table, you could modify the selector in:

$('#tab').find.('td').on('click',...

answered Dec 19, 2012 at 17:10

axel.michel

5,8741 gold badge18 silver badges25 bronze badges

Collectives™ on Stack Overflow

Change row table color with JavaScript

5 Answers 5

4 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related