Question

我有一张基本上像这样的表

<!DOCTYPE html>
<html lang="en">
<body>
  <table class="ui table" id="items">
    <tbody>
      <tr data-toggle="fieldset-entry">
        <td><input id="items-0-quantity" name="items-0-quantity" type="text" value=""></td>
        <td><input id="items-0-description" name="items-0-description" type="text" value=""></td>
      </tr>
    </body>
</html>

使用javascript，我想要一个向表中添加新行的按钮，我希望新行中的输入有id="items-1-xxx"和name="items-1-xxx，即如果原始行中有0，我希望新行中有1。

我可以通过克隆旧表来创建一个新表行，但我还没弄清楚如何修改输入的name和id属性。这是我尝试过的草图：

function cloneRow() {
  var table = document.getElementById("items");
  var original_row = table.rows[table.rows.length - 1];
  var new_row = original_row.cloneNode(true);

  // We have a new row and now we need to modify it as
  // described in the question. The only way I've found
  // is to grab the inner HTML:

  var cell_contents = original_row.cells[0].innerHTML;

  // Now we could do a bunch of string parsing and manipulations
  // to increment the 0 to a 1 and stuff the modified HTML into
  // new_row, but it seems there must be a better way.

  // Finally insert the new row into the table.
  original_row.parentNode.insertBefore(new_row, original_row.nextSibling);
  }

更新输入元素“id和name的正确方法是什么？

Answer 1

您可以构建新的<td>并将document.querySelectorAll('#items tr').length指定为x中的items-x-...：

＆＃13;

function addItem() {
  var items = document.querySelector('#items')
    , itemcount = items.querySelectorAll('tr').length
    , newitemQuantityText = 'items-' + itemcount + '-quantity'
    , newitemDescriptionText = 'items-' + itemcount + '-description'
    , newitem = document.createElement('tr')
    , newitemQuantity = document.createElement('td')
    , newitemDescription = document.createElement('td')
    , newitemQuantityInput = document.createElement('input')
    , newitemDescriptionInput = document.createElement('input');
  
  newitemQuantityInput.id = newitemQuantityText;
  newitemQuantityInput.name = newitemQuantityText;
  newitemQuantity.appendChild(newitemQuantityInput);
  
  newitemDescriptionInput.id = newitemDescriptionText;
  newitemDescriptionInput.name = newitemDescriptionText;
  newitemDescription.appendChild(newitemDescriptionInput);
  
  newitem.appendChild(newitemQuantity);
  newitem.appendChild(newitemDescription);
  
  document.querySelector('#items').appendChild(newitem);
}

document.querySelector('#add').addEventListener('click', addItem);

＆＃13;

<button id="add">add item</button>
<table id="items"></table>

＆＃13;

然而，使用好的旧innerHTML会更好地阅读：

＆＃13;

function addItem() {
  var items = document.querySelector('#items')
    , itemcount = items.querySelectorAll('tr').length;
  
  items.innerHTML += '<tr><td>' +
    '<input id="item-' + itemcount + '-quantity" name="item-' + itemcount + '-quantity">' + 
    '</td><td>' +
    '<input id="item-' + itemcount + '-description" name="item-' + itemcount + '-description">' +
    '</td></tr>';
}

document.querySelector('#add').addEventListener('click', addItem);

＆＃13;

<button id="add">add item</button>

<table id="items">
</table>

＆＃13;

Answer 2

您可以使用

单独重建节点本身

createAttribute()
createElement()

小提琴：http://jsfiddle.net/ztb9gq3d/1/

Answer 3

这不是问题所要求的面向数据的方法，但是一个相当简单的解决方案是

numRows = table.rows.length;

// Use a regexp so we can replace all instances of the number
// corresponding to what is currently the last table row.
var re = new RegExp((numRows - 1).toString(), "g")

for (var i = 0; i <= originalRow.cells.length - 1; i++) {
  var originalHTML = originalRow.cells[i].innerHTML;
  var newHTML = originalHTML.replace(re, numRows.toString());
  newRow.cells[i].innerHTML = newHTML;
}

显然，只有当我们替换的数字不存在于HTML字符串的其他地方时，这才有效，所以这不是一个特别好的解决方案。但是，我们可以使用更复杂的正则表达式。

这个解决方案确实具有以下优点：我们不需要将除了要替换的部分之外的任何内容硬编码到正则表达式中。因此，如果表中的HTML要在将来的开发中获取其他部分，那么这个解决方案仍然可以工作，直到正如前面提到的正则表达式的质量。

如何更新表格单元格中HTML元素的属性？

3 个答案: