In a table like this:
<table>
<!-- Insert Row of bun here -->
<tr id="meat">
<td>Hamburger</td>
</tr>
<!-- Insert Row of bun here -->
</table>
function AddBefore(rowId){}
function AddAfter(rowId){}
I need to create methods without using jQuery.. I am familiar with append after and append before in jQuery.. but I am stuck with using plain js.
Add a row above or below Click in a cell above or below where you want to add a row. Under Table Tools, on the Layout tab, do one of the following: To add a row above the cell, click Insert Above in the Rows and Columns group. To add a row below the cell, click Insert Below in the Rows and Columns group.
To add data to a table, create a row and use the “td” tag to insert data inside each row.
The task is to insert a new row in that table at a certain index using JQuery. Approach: Store the table column value <td> element into the variable. Then use eq() and after() method to insert the row in a table.
Use
function AddBefore(rowId){
var target = document.getElementById(rowId);
var newElement = document.createElement('tr');
target.parentNode.insertBefore(newElement, target);
return newElement;
}
function AddAfter(rowId){
var target = document.getElementById(rowId);
var newElement = document.createElement('tr');
target.parentNode.insertBefore(newElement, target.nextSibling );
return newElement;
}
You want insertBefore
. Use with nextSibling
to insert after a known element.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With