Question

I am looking for a way to use JS or jQuery to automatically extend the first row of a table with the second row.

For example, I currently have a table in this format:

<table id="tbl1">
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
  </tr>
  <tr>
    <td>Item 3</td>
    <td>Item 4</td>
  </tr>
</table>

And I would like to move the items in the second row into the first row, like this:

<table id="tbl1">
  <tr>
    <td>Item 1</td>
    <td>Item 2</td>
    <td>Item 3</td>
    <td>Item 4</td>
  </tr>
  <tr></tr>
</table>

The second set of tr tags does not have to be removed, and can remain blank, if that simplifies the code.

The table will have an id, but not any of the tags inside it.

Answer 1

var row2 = $("#tbl1 tr:eq(1)");
$("#tbl1 tr:first").append(row2.html()); // Add row 2 data to row 1
row2.html("");                           // empty row 2