我想在 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] 时无法识别我的表;
我想找到表格元素,以便我可以在该表格中创建行。
最佳答案
您可以通过这样做找到表格:
- 获取表格行中的一个元素,并获取父节点,直到获得表格。在这种情况下你可以做
document.getElementById('col1').parentNode.parentNode
只是为了让事情变得简单,
- 您可以插入此字符串
'</tr><tr>'
在表格单元格之后的一行中,轻松创建新行。
这应该比 document.getElementsByTagName('table')
好,因为如果您有很多距离很远的表,则需要更多时间才能在该数组中找到表的索引。
关于javascript - 在没有 id 和类的 html 表中创建行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51588140/