在没有id和类的html表中创建行答案

【问题标题】：Create row in html table which does not have id and class在没有id和类的html表中创建行
【发布时间】：2019-01-06 08:38:42
【问题描述】：

我想在 HTML 表中创建一个额外的行，这很常见，如果我们有该表的 id 或类可用，就可以完成。但就我而言，我有一页包含许多表格和表格。但在所有这些中，我有一个表格，它只包含一个元素，即表格，我想再创建一行并将几列从第一行移动到新创建的行。为此，我创建了简单的 HTML 页面。请找到下面的代码并帮助我实现输出。

<h:form id="myForm">
        <table>
          <tr>
                <td id="col1">Item Info</td>
                <td id="col2">Description</td>
                <td id="col3">Product</td>
                <td id="col4">Keywords</td>      
                <td id="col5">Documents</td>
                <td id="col6">Image</td>
                <td id="col7">Video</td>                
           </tr>
        </table>    
</h:form>

我在这里得到像这样的输出 项目信息描述产品关键字文档图片视频

但我想实现以下目标：

项目信息描述产品关键字
新 CELL1 文档图像视频

表示我想从现有行中删除几列，并将其添加到新创建的行中。为此，我编写了如下 Javascript：

<script type="text/javascript">

    window.onload = function() {
          split();
    };
    function split() {          

        var form = document.getElementById("myForm");       
        var table = form.elements[0];
        var tr = document.createElement("tr");
        tr.id="row2";
        table.appendChild(tr);
        var cell = tr.insertCell(0);
        cell.innerHTML = "NEW CELL1";
        var col5 = document.getElementById("col5");
        tr.appendChild(col5);
        var col6 = document.getElementById("col6");
        tr.appendChild(col6);
        var col7 = document.getElementById("col7");
        tr.appendChild(col7);           
    }   

    </script>

在这里，我的问题是整个表单将自动生成，因此我无法提供表格的 ID，并且使用此脚本在我提供 form.elemets[0] 时无法识别我的表格；

我想找到表格元素，以便在该表格中创建行。

【问题讨论】：

你的意思是你只想给你的桌子一个id？如form.id = 'newForm'?
jquery 是一个选项吗？
如果我可以提供 ID，那么我将能够通过该 ID 获取我的表。或者有没有直接的方法可以在没有id的情况下获取该表？我只想获取我的表格元素，这样我就可以直接或通过提供 id 添加新行，我也可以。 @stwilz 知道如何为该表提供 id 吗？
@JonP 我对 jquery 没有任何经验，但如果你有任何想法，我也会尝试 :)

标签： javascript html-table forms

【解决方案1】：

您可以通过以下方式找到该表：

获取表格行中的元素之一，并获取父节点，直到获得表格。在这种情况下，您可以执行document.getElementById('col1').parentNode.parentNode

只是为了缓解问题，

您可以在一行中插入此字符串'</tr><tr>'，在表格单元格之后，轻松创建新行。

这应该比document.getElementsByTagName('table') 更好，因为如果您有很多距离很远的表，那么在该数组中找到您的表的索引将需要更多时间。

【讨论】：

谢谢哥们....!!!!!这个对我有用。 document.getElementById('col1').parentNode.parentNode 正在返回我的表格元素。再次感谢您:)
好吧，多亏了你，我现在有 71 个代表。您可以对所有元素使用它来查找它们的父母或“祖父母”。

【解决方案2】：

使用getElementsByTagName 从您的表单中获取具有 ID 的表格

window.onload = function() {
  split();
};

function split() {

  var form = document.getElementById("myForm");
  var table = form.getElementsByTagName("table")[0];


  var tr = document.createElement("tr");
  tr.id = "row2";
  table.appendChild(tr);
  var cell = tr.insertCell(0);
  cell.innerHTML = "NEW CELL1";
  
  /*Your original code produces duplicate IDs which is a BAD thing*/
  var col5 = document.getElementById("col5");
  /*Update new Id*/
  col5.id += "_new";
  tr.appendChild(col5);
  var col6 = document.getElementById("col6");
  /*Update new Id*/
  col6.id += "_new";
  tr.appendChild(col6);
  var col7 = document.getElementById("col7");
  /*Update new Id*/
  col7.id += "_new";
  tr.appendChild(col7);
}

<form id="myForm">
  <table>
    <tr>
      <td id="col1">Item Info</td>
      <td id="col2">Description</td>
      <td id="col3">Product</td>
      <td id="col4">Keywords</td>
      <td id="col5">Documents</td>
      <td id="col6">Image</td>
      <td id="col7">Video</td>
    </tr>
  </table>
</form>

你还有列号不匹配，提供的代码原来有7列，只插入4，这会产生不一致的结果，请确保根据需要使用colspan属性。

【讨论】：

谢谢@JonP 其实我之前试过 var table = form.getElementsByTagName("table");但它没有返回我的表格元素，现在我明白我必须像 var table = form.getElementsByTagName("table")[0];所以它会返回表格元素。如果我有多个表，那么我可以使用 [0]、[1] 和 [2] 对吗？
正确，如果您在该 form 节点中有多个表。除非是一个专门返回一个元素的方法（getElementById，querySelector），否则该方法将返回一个找到的节点数组，所以你需要一个索引等。它可能是一个 1 的数组，但它仍然是一个数组。

【解决方案3】：

您应该能够使用 JavaScript 的 querySelector 方法来选择要从文档中删除的表格数据。

var rowToDeleteOrAddTo = document.querySelector("#myForm > table > tr > td"); 之类的东西应该可以帮助您实现目标。您需要查找 CSS Selectors 以获取您需要的特定选择器。拥有节点后，您可能需要使用 textContent 属性来确保删除正确的节点。

【讨论】：