Question

添加行

HTML

<br /><br />
<table id="tbl">
    <tr>
        <td><input type="text" name="links" /></td>
        <td><input type="text" name="keywords" /></td> 
        <td><input type="text" name="violationtype" /></td>   
        <td><input type="submit" class="button" value="Add another line" onclick="addField(this);" /></td>          
    </tr>
</table>

JS

function addField(n)
{
    var tr = n.parentNode.parentNode.cloneNode(true);
    document.getElementById('tbl').appendChild(tr);
}

我试图理解为什么这个在点击上添加行的代码实际上有效。首先，我意识到它将采取我点击（输入），并在它上面的两个父节点。所以第一个.parentNode指向td，而tr指向.cloneNode(true)。所以基本上我们正在使用这些新属性创建一个表。现在我的问题基本上是n.parentNode.parentNode在这里的作用是什么？我已阅读过mozilla文档，但我无法从他们的示例中了解到。为什么我不能马上追加CsvList？

Answer 1

每个元素都是独一无二的。如果您不克隆该元素，则该元素将移动到目标位置。因此，在此处使用clone是创建另一个行所必需的。

Answer 2

.cloneNode（true）复制选定的[tr]标记，如果删除它，您的代码会起作用，但其行为不同，因为您选择的[tr]已经属于您的表格。

顺便说一句，您应该更改克隆行输入的名称/ ID，以使其唯一。

p.s：你的jsfiddle只有一个parentNode，而不是两个。

了解在点击时添加行，与.cloneNode（true）混淆;

2 个答案: