CODEWITHSUNDEEP
javascriptjquery
tarique
tarique

Reputation: 2231

jQuery alternate table row colors for a specific table

i have two tables. <table id='1'></table> and <table id='2'></table>. When i put this code:

$(document).ready(function()
{
  //for table row
  $("tr:even").css("background-color", "#F4F4F8");
  $("tr:odd").css("background-color", "#EFF1F1");

});

Both the tables got it alternate row colors, which i dont want, i want only to color the table with id=2. how it can be accomplished?

Upvotes: 9

Views: 38512

Answers (4)

Mohammed mansoor
Mohammed mansoor

Reputation: 819

$("#tab1 tr:odd").css('background-color', 'red');

also works

Upvotes: 0

frangly
frangly

Reputation: 172

Pass your table Id as parameter:


settingTableRowColor('tableid');

var settingTableRowColor = function(tableName){
    $('#'+tableName+' tr:odd').attr('class','odd');
    $('#'+tableName+' tr:even').attr('class','even');
}

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382706

Modify your code like:

$(document).ready(function()
{
  $("table#id2 tr:even").css("background-color", "#F4F4F8");
  $("table#id2 tr:odd").css("background-color", "#EFF1F1");
});

This assumes you have table with id set to id2 eg:

<table id="id2">

Upvotes: 19

nickf
nickf

Reputation: 546055

First thing is that it's not allowed to have an id starting with a number. Change the tables to have ids something like this:

<table id="table1"></table>

Then, all you need to do is add the right selector into your jQuery:

$("#table2 tr:even").css(...);
$("#table2 tr:odd").css(...);

Upvotes: 10

Related Questions