I want different colors for alternate table rows even when i delete a row in middle.

HTML

<table border="1">
  <tr><td>Row 1</td><td><a class="sam" href="#">Delete</a></td></tr>
  <tr><td>Row 2</td><td><a class="sams" href="#">Delete</a></td></tr>
  <tr><td>Row 3</td><td><a class="sam" href="#">Delete</a></td></tr>
  <tr><td>Row 4</td><td><a class="sams" href="#">Delete</a></td></tr>
  <tr><td>Row 5</td><td><a class="sam" href="#">Delete</a></td></tr>
</table> 

Jquery

$(function(){
    update_rows();
    $("a").click(function(){$(this).parent().parent().remove();update_rows();});
});
function update_rows()
{
    $("tr:even").css("background-color", "#aaa");
    $("tr:odd").css("background-color", "#eee");
}

css

.sam
{
background-color:#FF00FF;
}
.sams
{
background-color:#0000FF;
}

the above code change the row color but not the cell which has link. Please help me to solve the problem

Demo

I want different colors for alternate table rows even when i delete a row in middle.

HTML

<table border="1">
  <tr><td>Row 1</td><td><a class="sam" href="#">Delete</a></td></tr>
  <tr><td>Row 2</td><td><a class="sams" href="#">Delete</a></td></tr>
  <tr><td>Row 3</td><td><a class="sam" href="#">Delete</a></td></tr>
  <tr><td>Row 4</td><td><a class="sams" href="#">Delete</a></td></tr>
  <tr><td>Row 5</td><td><a class="sam" href="#">Delete</a></td></tr>
</table> 

Jquery

$(function(){
    update_rows();
    $("a").click(function(){$(this).parent().parent().remove();update_rows();});
});
function update_rows()
{
    $("tr:even").css("background-color", "#aaa");
    $("tr:odd").css("background-color", "#eee");
}

css

.sam
{
background-color:#FF00FF;
}
.sams
{
background-color:#0000FF;
}

the above code change the row color but not the cell which has link. Please help me to solve the problem

Demo

• javascript
• jquery
• tablerow

• 2 Use CSS and browser handles it. – Ram Commented Jan 8, 2014 at 12:22
• 1 @krishna: stackoverflow./questions/3084261/… The downside is that IE8 doesn't support it. – T.J. Crowder Commented Jan 8, 2014 at 12:26
• @stackoverflow, the solution required here is different from solutions provided in the question you specified,because i want this to be working in IE and i need to change the class of cell having hyperlink, which is not answered there. – krishna Commented Jan 9, 2014 at 5:39

5 Answers 5

Try:

  <style>
     tr:nth-of-type(even) {
        background-color:#e3e3e3;
     }

     td:nth-of-type(odd) {
        color:#d04242;
     }
  </style>

You need to change the class as well

function update_rows() {
    $("tr:even").css("background-color", "#aaa").find('a').removeClass('sam').addClass('sams');
    $("tr:odd").css("background-color", "#eee").find('a').removeClass('sams').addClass('sam');
}

Demo: Fiddle

Use :nth-child if want to support only modern browsers - Demo: Fiddle

tr:nth-child(odd) a {
    background-color:#FF00FF;
}
tr:nth-child(even) a {
    background-color:#0000FF;
}
tr:nth-child(odd) {
    background-color:#aaa;
}
tr:nth-child(even) {
    background-color:#eee;
}

then

$(function () {
    $("a").click(function () {
        $(this).closest('tr').remove();
    });
});

Also note: use $(this).closest('tr').remove() instead of $(this).parent().parent().remove()

Use CSS3 for the styling:

<table id="whatever">
  <tr><td>Row 1</td><td><a href="#">Delete</a></td></tr>
  <tr><td>Row 2</td><td><a href="#">Delete</a></td></tr>
  <tr><td>Row 3</td><td><a href="#">Delete</a></td></tr>
  <tr><td>Row 4</td><td><a href="#">Delete</a></td></tr>
  <tr><td>Row 5</td><td><a href="#">Delete</a></td></tr>
</table>
<style>
#whatever tr {
    background-color: #AAA;
}
#whatever tr a {
    background-color:#F0F;
}
#whatever tr:nth-child(odd) {
    background-color: #EEE;
}
#whatever tr:nth-child(odd) a {
    background-color:#00F;
}
</style>
<script>
$("#whatever a").click(function(){
    $(this).closest("tr").remove();
});
</script>

Now no manual updating, neither for the link classes nor the row backgrounds is needed. See updated demo.

works perfectly with your tr. the link color doesent change because youre not targeting it with jQuery

I have updated the fiddle You need the update the class sam and sams

      $("tr:even td a").removeClass("sam").removeClass("sams").addClass("sam");
      $("tr:odd td a").removeClass("sam").removeClass("sams").addClass("sams");

Check on fiddle