javascript - 在没有 id 和类的 html 表中创建行

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') 好，因为如果您有很多距离很远的表，则需要更多时间才能在该数组中找到表的索引。