将新列添加到没有表id的HTML表中

Add new column to HTML table which has not table id

本文关键字:id HTML 表中 新列 添加      更新时间:2023-09-26

如何在下面的代码中添加一个新列,如果没有表id、tr id或td id,我需要发生这种情况。

请检查并告诉我

<p>Click the button to insert new cell(s) at the beginning of the table row.</p>
<table>
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
  </tr>
</table><br>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
    var row = ??????????????
    var x = row.insertCell(0);
    x.innerHTML = "New cell";
}
</script>

您可以使用getElementsByTagName来访问您的表。

var row = document.getElementsByTagName("table")[0].rows[0];

https://jsfiddle.net/4rmt4xmj/1/

@a.u.b使用var row = document.getElementsByTagName("table")[0].rows[0];提供的答案很好,但我想提到一种使用XPath的替代方法。

您可以检查元素,然后选择该表并右键单击->复制->复制XPath

然后您可以使用以下代码来获得所需的元素:

var elementTable = document.evaluate( '/html/body/table' ,document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ).singleNodeValue;
if (elementTable != null) {
  //do something
}

这是JsFiddle演示

试试这个

				function myFunction(){
					var row = document.getElementsByTagName("table")[0].rows[0];
					var x = row.insertCell();
					x.innerHTML = "Last";
				}
		
	<table border="1">
			<tr>
				<td>First</td>
				<td>Second</td>
				<td>Third</td>
			</tr>
		</table>
		<br /><br />
		<button onclick="myFunction()">Try it</button>