javascript - 如何在javascript中添加一行

Question

我正在尝试根据已有的行添加一个空行。我花了一个小时环顾四周并尝试不同的方法，但似乎都不起作用。这是我到目前为止所拥有的:

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);
}  

我目前只询问有关 insRow() 函数的问题，如果您对删除行有建议，请分享。

Answer 1

当您创建现有 tr 元素的副本时，您可以使用 cloneNode 来实现此目的，而不是使用 createElement 创建所有 DOM 元素

试试这个:

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