使用JavaScript克隆表行时如何自动增加单元格id？

Question

我一直在研究这方面，我正在努力寻找一种专门用于我想做的方法。

我能够克隆行并自动增加行的id名称，但我似乎无法为td's执行此操作。对于循环我使用输入，其中用户说他们想要创建多少row's。每次函数循环时，我想在单元格id的末尾添加一个数字。

function cloneRow() {
  var rowAmmount = document.getElementById("rowAmmount").value;
  for (var i = 1; i <= rowAmmount; i++) {
    var row = document.getElementById("row"); // find row to copy
    var table = document.getElementById("table"); // find table to append to
    var clone = row.cloneNode(true); // copy children too
    clone.id = "newRow" + i; // change id or other attributes/contents
    table.appendChild(clone); // add new row to end of table
    var tag = document.getElementsByTagName('td');
    tag.id += i;
  }

<table>
  <input id="rowAmmount">
  <button id="add" onclick="cloneRow()">New Row</button>
  <button type="button" onclick="submit()">Submit</button>
  <select id="select">
    <option value="html">HTML</option>
    <option value="packlist">Packlist</option>
  </select>
  <table>
    <thead>
      <col width: "130" />
      <col width: "130" />
      <col width: "130" />
      <col width: "130" />
      <col width: "130" />
      <col width: "130" />
      <col width: "130" />
      <tr>
        <th>Fabric</th>
        <th>Fabric Input</th>
        <th>Style</th>
        <th>Colour</th>
        <th>Sizeguide</th>
        <th>Image Link</th>
        <th>Image</th>
        <th>Item Name</th>
        <th>Description</th>
    </thead>
    <tbody id="table">
      <tr id="row">
        <td><input id="fabric" placeholder="Input"></td>
        <td><input id="fabricInput" placeholder="Input 'Yes' 'No' or 'Number'"></td>
        <td><input id="style" placeholder="Input"></td>
        <td><input id="colour" placeholder="Input"></td>
        <td><input id="sizeGuide" placeholder="Input File Name"></td>
        <td><input id="imageLink" placeholder="Input"></td>
        <td class="output"><img id="image" src=""></output>
        </td>
        <td class="output"><output id="name"></output></td>
        <td class="output"><output id="description"></output></td>

      </tr>

Answer 1

您可以使用解决方案

function cloneRow() {
  var rowAmmount = document.getElementById("rowAmmount").value;
  var getTotalRows = document.getElementsByTagName('tbody')[0].children.length;
  for (var i = 0; i < rowAmmount; i++) {
    var row = document.getElementById("row"); // find row to copy
    var table = document.getElementById("table"); // find table to append to
    var clone = row.cloneNode(true); // copy children too
    clone.id = "newRow" + (getTotalRows + i); // change id or other attributes/contents
    table.appendChild(clone); // add new row to end of table
    var children = document.getElementById('newRow' + (getTotalRows + i)).children;
    for (var j = 0; j < children.length; j++) {
      var tableChild = children[j].children;
      tableChild[0].setAttribute('id', tableChild[0].getAttribute('id') + (getTotalRows + i));
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="rowAmmount">
<button id="add" onclick="cloneRow()">New Row</button>
<button type="button" onclick="submit()">Submit</button>
<select id="select">
  <option value="html">HTML</option>
  <option value="packlist">Packlist</option>
</select>
<table>
  <thead>
    <tr>
      <th>Fabric</th>
      <th>Fabric Input</th>
      <th>Style</th>
      <th>Colour</th>
      <th>Sizeguide</th>
      <th>Image Link</th>
      <th>Image</th>
      <th>Item Name</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody id="table">
    <tr id="row">
      <td><input id="fabric" placeholder="Input"></td>
      <td><input id="fabricInput" placeholder="Input 'Yes' 'No' or 'Number'"></td>
			<td><input id="style" placeholder="Input"></td>
      <td><input id="colour" placeholder="Input"></td>
      <td><input id="sizeGuide" placeholder="Input File Name"></td>
      <td><input id="imageLink" placeholder="Input"></td>
      <td class="output"><img id="image" src=""></output></td>
	  <td class="output"><output id="name"></output></td>
	  <td class="output"><output id="description"></output></td>
    </tr>
  </tbody>
</table>

Answer 2

我建议你做这样的事情：

• 从空表开始，使用class="hidden"隐藏“模板”行
• 使用.querySelectorAll('tr').length了解您的表中包含的tr个，
• 使用.querySelectorAll("*[id]")通过id和.forEach()循环获取所有元素，使用id中的tr来更改id s以上方法。

我使用上述方法在复制后从“模板”修改inputs / output / image的现有id，但它可能是很容易在其他元素上添加其他td（例如var table = document.getElementById("table"); // Find table to append to var row_typical = document.getElementById("row"); // Find row to copy function cloneRow() { var rowAmmount = document.getElementById("rowAmmount").value; for (var i = 1; i <= rowAmmount; i++) { var clone = row_typical.cloneNode(true); // Copy typical row with children var num = table.querySelectorAll('tr').length; // Get current number of tr clone.id = "newRow" + num; // Change id of tr var ids = clone.querySelectorAll("*[id]"); // Get all elements with id in tr, ids.forEach(function(elm) { // For all ids elm.id += num; // Add the num of the tr }); clone.classList.remove('hidden'); // Remove the "hidden" class table.appendChild(clone); // Add new row to end of table } } s）。

段：

.hidden {
  display: none;
}

<input id="rowAmmount" placeholder="Row Amount">
<button id="add" onclick="cloneRow()">New Row</button>
<button type="button" onclick="submit()">Submit</button>
<select id="select">
  <option value="html">HTML</option>
  <option value="packlist">Packlist</option>
</select>
<table>
  <thead>
    <tr>
      <th>Fabric</th>
      <th>Fabric Input</th>
      <th>Style</th>
      <th>Colour</th>
      <th>Sizeguide</th>
      <th>Image Link</th>
      <th>Image</th>
      <th>Item Name</th>
      <th>Description</th>
  </thead>
  <tbody id="table">
    <tr class="hidden" id="row">
      <td><input id="fabric" placeholder="Input"></td>
      <td><input id="fabricInput" placeholder="Input 'Yes' 'No' or 'Number'"></td>
      <td><input id="style" placeholder="Input"></td>
      <td><input id="colour" placeholder="Input"></td>
      <td><input id="sizeGuide" placeholder="Input File Name"></td>
      <td><input id="imageLink" placeholder="Input"></td>
      <td class="output"><img id="image" src=""></td>
      <td class="output"><output id="name"></output></td>
      <td class="output"><output id="description"></output></td>
    </tr>
  </tbody>
</table>

{{1}}

希望它有所帮助。

Answer 3

这样做。

检查下面的代码段。

function cloneRow() {
  var rowAmmount = document.getElementById("rowAmmount").value;
  var added = document.querySelectorAll("tbody#table tr").length;
  for (var i = 1; i <= rowAmmount; i++) {
    var row = document.getElementById("row"); // find row to copy
    var table = document.getElementById("table"); // find table to append to
    var clone = row.cloneNode(true); // copy children too
    clone.id = "newRow" + (i + added); // change id or other attributes/contents
    console.log(clone.id);
    table.appendChild(clone); // add new row to end of table
    var tag = document.getElementsByTagName('td');
    tag.id += i;
  }
}

<table>
  <input id="rowAmmount">
  <button id="add" onclick="cloneRow()">New Row</button>
  <button type="button" onclick="submit()">Submit</button>
  <select id="select">
    <option value="html">HTML</option>
    <option value="packlist">Packlist</option>
  </select>
  <table>
    <thead>
      <col width: "130" />
      <col width: "130" />
      <col width: "130" />
      <col width: "130" />
      <col width: "130" />
      <col width: "130" />
      <col width: "130" />
      <tr>
        <th>Fabric</th>
        <th>Fabric Input</th>
        <th>Style</th>
        <th>Colour</th>
        <th>Sizeguide</th>
        <th>Image Link</th>
        <th>Image</th>
        <th>Item Name</th>
        <th>Description</th>
    </thead>
    <tbody id="table">
      <tr id="row">
        <td><input id="fabric" placeholder="Input"></td>
        <td><input id="fabricInput" placeholder="Input 'Yes' 'No' or 'Number'"></td>
        <td><input id="style" placeholder="Input"></td>
        <td><input id="colour" placeholder="Input"></td>
        <td><input id="sizeGuide" placeholder="Input File Name"></td>
        <td><input id="imageLink" placeholder="Input"></td>
        <td class="output"><img id="image" src=""></output>
        </td>
        <td class="output"><output id="name"></output></td>
        <td class="output"><output id="description"></output></td>

      </tr>