JSFiddle - React, Tailwind, and code Playground

by Swapnil Khamkar

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>

JavaScript

document.getElementById("delOrebutton").onclick = function deleteRow(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);
}