javascript - 在 HTML 表格中添加空白行

Question

我有一个 HTML 表格，它在当前行中的按钮所在位置下方添加了一个新行。目前，当创建该行时，它会生成上面的行的克隆，包括数据。我希望这是一个没有输入值条目的行，而不是上面值的克隆。

Javascript

function addRow(row)
{
    var i = row.parentNode.parentNode.rowIndex;
    var tr = document.getElementById('Table').insertRow(i+1);
    tr.innerHTML = row.parentNode.parentNode.innerHTML;
    tr.children[0].innerHTML = tr.parentNode.querySelectorALL("tr").length-1;
} 

<table id="Table" border="1">
    <tr>
        <td><b>Measured Depth</b></td>
        <td><b>Inclination</b></td>
        <td><b>Azimuth</b></td>
        <td><b>Delete?</b></td>
        <td><b>Add Row?</b></td>
    </tr>
    <tr>
        <td><input size=25 type="text" id="Measured Depth0[]" contenteditable="true" value='339'></td>
        <td><input size=25 type="text" id="Inclination0[]" contenteditable='true' value='0.540000021'></td>
        <td><input size=25 type="text" id="Azimuth0[]" contenteditable='true' value='310.7200012'></td>
        <td><input type="button" id="delbutton0" value="Delete" onclick="deleteRow(this)"/></td>
        <td><input type="button" id="addmorebutton0" value="Add Row Below" onclick="addRow(this)"/></td>
    </tr>
</table>

Answer 1

添加一行后，您只需将该行中所有输入的值设置为“”即可。使用 tr.querySelectorAll("input[type='text']") 获取文本类型的所有输入，并使用循环将所有值设置为“”

  function addRow(row)
{
var i = row.parentNode.parentNode.rowIndex;
var tr = document.getElementById('Table').insertRow(i+1);
tr.innerHTML = row.parentNode.parentNode.innerHTML;
var inputs = tr.querySelectorAll("input[type='text']");
for(var i=0; i<inputs.length; i++)
   inputs[i].value = "";
}

<table id="Table" border="1">
        <tr>
            <td><b>Measured Depth</b></td>
            <td><b>Inclination</b></td>
            <td><b>Azimuth</b></td>
            <td><b>Delete?</b></td>
            <td><b>Add Row?</b></td>
        </tr>
        <tr>
            <td><input size=25 type="text" id="Measured Depth0[]" contenteditable="true" value='339'></td>
            <td><input size=25 type="text" id="Inclination0[]" contenteditable='true' value='0.540000021'></td>
            <td><input size=25 type="text" id="Azimuth0[]" contenteditable='true' value='310.7200012'></td>
            <td><input type="button" id="delbutton0" value="Delete" onclick="deleteRow(this)"/></td>
            <td><input type="button" id="addmorebutton0" value="Add Row Below" onclick="addRow(this)"/></td>
        </tr>
</table>