How to add a row in javascript

Question

I am trying to add an empty row based on the row that I already have. I have spent an hour looking around and trying different ways but none seem to work. This is what I have so far:

HTML:

<div id="Oretablediv">
<table id="OreTable" border="1">
    <tr>
        <td>Ore</td>
        <td>Amount</td>
        <td>Price</td>
        <td>Sub Total</td>
        <td>Delete?</td>
        <td>Add Rows?</td>
    </tr>
    <tr>
      <td>
        <select name="Ore">
          <option value="value1">Value 1</option>
          <option value="value2">Value 2</option>
        </select>
      </td>
      <td><input size=25 type="text" id="Amount" ></td>
      <td>Price</td>
      <td>SubTotal</td>
      <td><input type="button" id="delOrebutton" value="Delete" onclick="deleteRow(this)"/></td>
      <td><input type="button" id="addOrebutton" value="Add More Ore" onclick="insRow()"/></td>
    </tr>
</table>

Javascript:

function deleteRow(row){
var i=row.parentNode.parentNode.rowIndex;
document.getElementById('OreTable').deleteRow(i);
}

function insRow(){
  var row = document.createElement('tr');
  var col = document.createElement('td');
  var col2 = document.createElement('td');
  row.appendChild(col);
  row.appendChild(col2);
  var table = document.getElementById("OreTable");
  table.appendChild(row);
}  

I am currently only asking about the insRow() function, if you have suggestions for the delete row please share.

Answer 1

As you are creating copy of the existing tr element, you can achieve this using cloneNode instead of creating all the DOM elements using createElement

Try this:

function deleteRow(row) {
  var i = row.parentNode.parentNode.rowIndex;
  document.getElementById('OreTable').deleteRow(i);
}

function insRow() {
  var tr = document.getElementById('toClone');
  var cln = tr.cloneNode(true);
  var elem = cln.querySelector('#Amount');
  elem.value = '';
  var table = document.getElementById("OreTable");
  table.appendChild(cln);
}

<div id="Oretablediv">
  <table id="OreTable" border="1">
    <tr>
      <td>Ore</td>
      <td>Amount</td>
      <td>Price</td>
      <td>Sub Total</td>
      <td>Delete?</td>
      <td>Add Rows?</td>
    </tr>
    <tr id='toClone'>
      <td>
        <select name="Ore">
          <option value="value1">Value 1</option>
          <option value="value2">Value 2</option>
        </select>
      </td>
      <td>
        <input size=25 type="text" id="Amount">
      </td>
      <td>Price</td>
      <td>SubTotal</td>
      <td>
        <input type="button" id="delOrebutton" value="Delete" onclick="deleteRow(this)" />
      </td>
      <td>
        <input type="button" id="addOrebutton" value="Add More Ore" onclick="insRow()" />
      </td>
    </tr>
  </table>

Fiddle here

Answer 2

You can attach the click to the button id as follows:

Here is the fiddle: https://jsfiddle.net/swaprks/c1wsomxp/

JAVASCRIPT:

document.getElementById("delOrebutton").onclick = function eleteRow(row){
    var i= this.parentNode.parentNode.rowIndex;
    document.getElementById('OreTable').deleteRow(i+1);
}

document.getElementById("addOrebutton").onclick = function insRow(){
  var row = document.createElement('tr');
  var col = document.createElement('td');
  var col2 = document.createElement('td');
  row.appendChild(col);
  row.appendChild(col2);
  var table = document.getElementById("OreTable");
  table.appendChild(row);
} 



HTML:

<div id="Oretablediv">
<table id="OreTable" border="1">
    <tr>
        <td>Ore</td>
        <td>Amount</td>
        <td>Price</td>
        <td>Sub Total</td>
        <td>Delete?</td>
        <td>Add Rows?</td>
    </tr>
    <tr>
      <td>
        <select name="Ore">
          <option value="value1">Value 1</option>
          <option value="value2">Value 2</option>
        </select>
      </td>
      <td><input size=25 type="text" id="Amount" ></td>
      <td>Price</td>
      <td>SubTotal</td>
      <td><input type="button" id="delOrebutton" value="Delete" /></td>
      <td><input type="button" id="addOrebutton" value="Add More Ore"/></td>
    </tr>
</table>
</div>

I have also updated the delete function to delete the first row which was added.

Answer 3

It looks like your script will insert the row as a direct child of the "table" tag. Browsers will often insert a "tbody" tag as a child of the table tag, but a parent to the "tr" tags. So I think your appendChild(row) call should use the tbody element instead of the table element.