JavaScript Inserting a new row into a table right above the last row of the table

Question

JavaScript Inserting a new row into a table right above the last row of the table

Here is the code snippet for my table:

Check out my JSfiddle for a live demo.

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.insertBefore(tr, xTable.lastElementChild.previousElementSibling);
}

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

I encountered an issue where the new tr is being added at the end of the tbody. I'm looking for a solution to insert the new tr one place before the last tr. Is there a way to achieve this?

javascript html-table

Answer 1

Answer №1

If you need to add a row to a table at a specific position, there is a convenient method available just for that:

function addNewRow()
{
    var table = document.getElementById('partsTable');
    var index = table.rows.length - 1;
    var newRow = table.insertRow(index);
    newRow.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>" ;
}

Answer 2

If you need to add a row to a table at a specific position, there is a convenient method available just for that:

function addNewRow()
{
    var table = document.getElementById('partsTable');
    var index = table.rows.length - 1;
    var newRow = table.insertRow(index);
    newRow.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>" ;
}

Answer 3

Answer №2

If you need to locate the specific row where you want to insert a new one, you can utilize the insertAdjacentHTML method with either the beforebegin option to insert before or beforeend to append.

function addNewRow(button)
{
    var table=document.getElementById('partsTable');
    var body = table.tBodies[0];
    var rows = body.rows;
    
    // Select the last row and prepend a new one
    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="addNewRow();">+</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>

Answer 4

If you need to locate the specific row where you want to insert a new one, you can utilize the insertAdjacentHTML method with either the beforebegin option to insert before or beforeend to append.

function addNewRow(button)
{
    var table=document.getElementById('partsTable');
    var body = table.tBodies[0];
    var rows = body.rows;
    
    // Select the last row and prepend a new one
    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="addNewRow();">+</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>

JavaScript Inserting a new row into a table right above the last row of the table

Answer №1

Answer №2

Similar questions

Switch the toggle to activate or deactivate links

What is the best way to incorporate options using jQuery?

Issue with triggering jQuery .submit() function on Bootstrap 3 modal form

Sorting a 2D array in Javascript based on numerical values

Issues with jQuery Progress Bar Functionality

The Jqueryui image link is not displaying the image despite no error being reported

Preventing touchstart default behavior in JavaScript on iOS without disrupting scrolling functionality

When transferring information from the UI controller to Javascript, there is a risk of losing certain data points in the process

Send the output of MPDF back to the browser by utilizing JSON in combination with ExtJS

Navigating through pages using Nuxt UI-pagination

Retrieving PHP data with jQuery

Transform a <td> into a table-row (<tr>) nested within a parent <tr> inside an umbrella structure

Is there a way to modify the space bar and enter key functionality exclusively for the third button, rather than applying it to all buttons?

What is the best way to recover past messages from a channel?

I'm attempting to store the information from fs into a variable, but I'm consistently receiving undefined as the output

Express.js never terminates a session

How do I programmatically switch the Material-UI/DatePicker to year view in React?

Numpad functionality in JQuery malfunctioning post-ajax request

What is the best way to sum the numbers in this code snippet?

PHP - WebCalendar - Show or Hide Field According to Selected Item in Dropdown List