0

我希望能够在我的表中追加一行。现在的代码方式，它只是在表格之外添加了两个输入框，而不管我在哪里插入它。当我在浏览器中检查时，表格标签似乎已被剥离，使用 getElementByID 函数是否有问题？

我要添加到表中的隐藏行：

<div id="rowToBeAdded" style="display: none">
  <tr>
    <td><input type="button" value="Remove" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /></td>
    <td><input style="margin-right:2em;" type="text" value="" name="newLinkTitle[]" size="50" /></td>
    <td><input type="text" value="http://" name="newLinkAddress[]" size="50" /></td>
  </tr>
</div>

在我的最后一张</tr>桌子之后，我有：

<span id="addRowHere">  
  <input type="button" id="moreFields" value="Add more links" onclick="init()" />
</span>

这是我的 Javascript：

function init() {
  document.getElementById('moreFields').onclick = moreFields;
  moreFields();
}

function moreFields() {
  var newFields = document.getElementById('rowToBeAdded').cloneNode(true);
  newFields.style.display = 'block';

  var newField = newFields.childNodes;
  var insertHere = document.getElementById('addRowHere');
  insertHere.parentNode.insertBefore(newFields,insertHere);

}
4

1 回答 1

1

试试这个

http://jsfiddle.net/blackjim/yGVWM/3/ 编辑：修复了删除按钮

document.getElementById('moreFields').onclick = addMoreFields;    //    set binding

var newRow = document.getElementById('rowTemplate').cloneNode(true),
    myTable = document.getElementById('myTable');

function addMoreFields() {
    myTable.appendChild(newRow.cloneNode(true));
}

您还应该创建一个删除线的功能。自己试试。并使用 classes 和 id 来获取您的元素。

于 2013-06-21T16:47:44.607 回答