Question

我想在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>

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

但是我想实现以下目标：

项目信息描述产品关键字
NEW 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]时，它无法识别我的表格。

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

Answer 1

您可以通过执行以下操作找到表格：

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

只是为了放松心情，

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

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

Answer 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属性。

Answer 3

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

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

在html表中创建没有id和class的行

3 个答案: