CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Yash Mittal
Yash Mittal

Reputation: 53

Apply CSS "stripe" effect to dynamically-inserted table rows in JavaScript

I have made a table. In that, when I click on button, a row is added. I want to assign alternate color to the row inserted.

$("#new-row").click(function() {
  $('#first').clone(true).insertAfter('#demo tbody>tr:last');

  if ($('#demo tr:last').hasClass("lgrey")) {
    $('#demo tr:last').removeClass("lgrey");
    $('#demo tr:last').addClass("dgrey");
  } else if ($('#demo tr:last').hasClass("dgrey")) {
    $('#demo tr:last').removeClass("dgrey");
    $('#demo tr:last').addClass("lgrey");
  };

});
.lgrey {
  background-color: #eee;
}

.dgrey {
  background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="demo">
  <tr>
    <th>H1</th>
    <th>H2</th>
    <th>H3</th>
  </tr>
  <tr class="lgrey" id="first">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

<button id="new-row">ADD ROW</button>

But running this code does not give desired result.

Please help in assigning an alternate color to inserted rows.

Upvotes: 2

Views: 773

Answers (5)

Mohammad Akbari
Mohammad Akbari

Reputation: 4766

I select row color before add new row as following:

$("#new-row").click(function() {
  if ($('#demo tr:last').hasClass("lgrey")) {
    var add = "dgrey";
    var remove = "lgrey";
  } else if ($('#demo tr:last').hasClass("dgrey")) {
    var add = "lgrey";
    var remove = "dgrey";
  };

  $('#first').clone(true).insertAfter('#demo tbody>tr:last');

  $('#demo tr:last').removeClass(remove);
  $('#demo tr:last').addClass(add);

});
.lgrey {
  background-color: #eee;
}

.dgrey {
  background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="demo">
  <tr>
    <th>H1</th>
    <th>H2</th>
    <th>H3</th>
  </tr>
  <tr class="lgrey" id="first">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

<button id="new-row">ADD ROW</button>

Upvotes: 1

gyre
gyre

Reputation: 16777

You don't need JavaScript for this . . . use the :nth-child(an+b) selector instead. This approach is much clearer than messing around with unnecessary classes and jQuery code.

Replace the .lgrey and .dgrey selectors with #demo tr:nth-child(2n+2), and #demo tr:nth-child(2n+3), respectively.

(Note that using even and odd, as some others have suggested, will not allow you to leave the header row unstyled.)

$('#new-row').click(function () {
  $('#first').clone(true).insertAfter('#demo tr:last')
})
#demo tr:nth-child(2n+2) {
  background-color: #eee;
}

#demo tr:nth-child(2n+3) {
  background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="demo">
  <tr>
    <th>H1</th>
    <th>H2</th>
    <th>H3</th>
  </tr>
  <tr id="first">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

<button id="new-row">ADD ROW</button>

Upvotes: 2

brk
brk

Reputation: 50291

Use css to handle alternate row colors

tr:nth-child(even) {
    background-color: #eee;
}
tr:nth-child(even) {
    background-color: #ccc;
}

DEMO

Upvotes: 1

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

Use tr:nth-child css property like:

tr:nth-child(even) {
    background-color: #004400;
}

tr:nth-child(odd) {
    background-color: #000000;
}

It will handle the alternate color for each tr either generated static or dynamic.

Upvotes: 2

Neil
Neil

Reputation: 14313

You should really use CSS's nth-child(even) and nth-child(even)for this. 

$("#new-row").click(function() {
  $('#first').clone(true).insertAfter('#demo tbody>tr:last');
});
tr:nth-child(even) {
  background-color: #eee;
}

tr:nth-child(odd) {
  background-color: #ccc;;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="demo">
  <tr>
    <th>H1</th>
    <th>H2</th>
    <th>H3</th>
  </tr>
  <tr class="lgrey" id="first">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

<button id="new-row">ADD ROW</button>

Upvotes: 1

Related Questions