Javascript Adding row to table before last row of table

Question

My table code is:

And Here is my JSfiddle

function insert_Row() {
  var xTable = document.getElementById('partsTable');
  var tr = document.createElement('tr');
  tr.innerHTML = "<td colspan=2><input type='text' name='parts[]' placeholder='part 1' class='form-control' > </td><td><input type='text' name='price[]' placeholder='price e.g 100' class='form-control' ></td>";
  xTable.appendChild(tr);
}

<table class="table table-bordered table-striped" id="partsTable">
  <thead>
    <tr class="bg-primary">
      <th colspan=2>Services</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan=2><input type='text' name="parts[]" placeholder="part 1" class='form-control'> </td>
      <td><input type='text' name="price[]" placeholder="price e.g 100" class='form-control'></td>
    </tr>
    <tr>
      <td colspan=3><button onclick="insert_Row();">+</button></td>

    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td class="col-md-6"> &nbsp </td>
      <td><strong>Total</strong></td>
      <td><strong>$1000.00</strong></td>
    </tr>
  </tfoot>
</table>

but it is adding new tr at the end of tbody. I want to add tr one place before last tr. Is this possible to do so ?

Alnitak · Accepted Answer · 2017-08-29 11:40:28Z

3

There's a specific method for creating and inserting a row in a table at a specified index:

function insert_Row()
{
    var xTable = document.getElementById('partsTable');
    var index = xTable.rows.length - 1;
    var tr = xTable.insertRow(index);
    tr.innerHTML = "<td colspan=2><input type='text' name='parts[]' placeholder='part 1' class='form-control' > </td><td><input type='text' name='price[]' placeholder='price e.g 100' class='form-control' ></td>" ;
}

edited Aug 29, 2017 at 11:40

answered Aug 29, 2017 at 11:25

Alnitak

341k72 gold badges420 silver badges503 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yury Tarabanko · Accepted Answer · 2017-08-29 11:34:24Z

You could find the row relative to which you want to insert a new one. And use insertAdjacentHTML either beforebegin to prepend or beforeend to append

function insert_Row(button)
{
    var xTable=document.getElementById('partsTable');
    var body = xTable.tBodies[0]
    var rows = body.rows
    
    // pick the last and prepend
    rows[rows.length - 1].insertAdjacentHTML('beforebegin', "<tr><td colspan=2><input type='text' name='parts[]' placeholder='part 1' class='form-control' > </td><td><input type='text' name='price[]' placeholder='price e.g 100' class='form-control' ></td></tr>")
}

<table class="table table-bordered table-striped" id="partsTable">
    <thead>
        <tr class="bg-primary" >
            <th colspan=2>Services</th>
            <th>Amount</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan=2><input type='text' name="parts[]" placeholder="part 1" class='form-control' > </td>
            <td><input type='text' name="price[]" placeholder="price e.g 100" class='form-control' ></td>
        </tr>
        <tr>
            <td colspan=3><button onclick="insert_Row();">+</button></td>

        </tr>
    </tbody>
    <tfoot>
        <tr>
                <td class="col-md-6"> &nbsp </td>
                <td><strong>Total</strong></td>
                <td><strong>$1000.00</strong></td>
        </tr>
    </tfoot>
</table>

IMHO, that's pretty horrible compared to table.insertRow().

Collectives™ on Stack Overflow

Javascript Adding row to table before last row of table

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related