Question

我希望能够在我的表中附加一行。代码现在的方式，它只是在表外添加两个输入框，无论我在哪里插入它。当我在浏览器中检查时，看起来表标签已被剥离，使用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);

}

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

你应该做一个删除线的功能。亲自尝试一下。并使用类和id来获取元素。

使用getElementByID将表行附加到表？

1 个答案: