Alternate table row color even if row is removed

Question

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

@krishna: http://stackoverflow.com/questions/3084261/alternate-table-row-color-using-css The downside is that IE8 doesn't support it. — T.J. Crowder, Jan 08 '14 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, Jan 09 '14 at 05:39

score 4 · Answer 1 · answered Jan 08 '14 at 12:30

4

Try:

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

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

answered Jan 08 '14 at 12:30

shruti

780
9
25

Arun P Johny · Accepted Answer · 2014-01-08T12:32:13.963

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()

score 2 · Answer 3 · answered Jan 08 '14 at 12:30

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.

score 0 · Answer 4 · answered Jan 08 '14 at 12:27

0

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

answered Jan 08 '14 at 12:27

visualex

736
12
17

score 0 · Answer 5 · answered Jan 08 '14 at 12:28

0

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

answered Jan 08 '14 at 12:28

rrugbys

282
1
10

Alternate table row color even if row is removed

5 Answers5

Linked