CODEWITHSUNDEEP
javascriptjqueryappendtablerow
William Morgan
William Morgan

Reputation: 33

append table row after every fifth row using javascript/jQuery

I need to append a table row count after every 5th row in a table. How can I do this without using server side programming? jQuery or regular javascript is fine!

I would like this table:

   <table>
      <tr><td>1</td></tr>
      <tr><td>2</td></tr>
      <tr><td>3</td></tr>
      <tr><td>4</td></tr>
      <tr><td>5</td></tr>
      <tr><td>6</td></tr>
      <tr><td>7</td></tr>
      <tr><td>8</td></tr>
      <tr><td>9</td></tr>
      <tr><td>10</td></tr>
      <tr><td>11</td></tr>
   </table>

To become this:

   <table>
      <tr><td>1</td></tr>
      <tr><td>2</td></tr>
      <tr><td>3</td></tr>
      <tr><td>4</td></tr>
      <tr><td>5</td></tr>
      <tr><td>--5th--</td></tr>
      <tr><td>6</td></tr>
      <tr><td>7</td></tr>
      <tr><td>8</td></tr>
      <tr><td>9</td></tr>
      <tr><td>10</td></tr>
      <tr><td>--10th--</td></tr>
      <tr><td>11</td></tr>
   </table>

Upvotes: 2

Views: 2112

Answers (2)

ipr101
ipr101

Reputation: 24236

Try - 

$("table tr:nth-child(5n)").after("<tr><td>--added--</td></tr>")

Demo - http://jsfiddle.net/SZpuh/

Upvotes: 0

Manuel van Rijn
Manuel van Rijn

Reputation: 10305

here you are

$("table tr:nth-child(5n)").after("<tr><td> new row </td></tr>")

update

or even beter

$("table tr:nth-child(5n)").each(function() {
    $(this).after("<tr><td>--"+$("td", this).text()+"th--</td></tr>")
});

Upvotes: 8

Related Questions