如何通过单元格索引访问表中的按钮

How to access a button in a table via the cell index

本文关键字：按钮 访问表 索引 何通过 单元格      更新时间：2023-09-26

在HTML页面中，我有一个表格，单元格中有按钮。现在我想使用 js 更改按钮的文本。但是我不能使用 id 来做到这一点，我需要根据单元格索引来做到这一点，如下所示：

document.getElementById.rows[i].cells[j].???? = "Buttontext";

我知道：

document.getElementById.rows[i].cells[j].innerHTML = "Buttontext";
可以更改单元格

中的文本，但我需要一个类似的函数来更改放置在单元格中的按钮的文本。

考虑到单元格内只有按钮，您可以使用：

document.getElementById("tableid").rows[i].cells[j].firstChild.innerHTML="buttontext";

如果单元格内有其他元素，则可以循环浏览它们以找到按钮。如果您有多个按钮，请检查循环中您想要的按钮（第一个按钮、第二个按钮等）

例：

.HTML

<html>
<head>
</head>
<body>
<table id="tableid">
<tbody>
<tr><td><button>Woho!</button></td></tr>
</tbody>
</table>
</body>
</html>

爪哇语

document.getElementById("tableid").rows[0].cells[0].firstChild.innerHTML="buttontext";

另外，正如Batu Zet在评论中建议的那样，如果只有一个按钮，但它不是单元格中的第一个元素，并且您知道它是索引，则可以使用：

document.getElementById("myTable").rows[i].cells[j].children[indexOfButton].inne‌​rHTML="buttontext";
您可以在

行和单元格中找到按钮：

document.getElementById('myTable').rows[0].cells[0].getElementsByTagName('button')[0].innerText='New Name';

http://jsfiddle.net/mghomoos/

像这样使用document.querySelector：

var i = 2,
    j = 3;
document.querySelector("table tr:nth-child("+i+") > td:nth-child("+j+") > button").innerHTML = "ButtonText";
<table>
    <tr><td>1</td><td>2</td><td><button>3</button></td></tr>
    <tr><td>4</td><td>5</td><td><button>6</button></td></tr>
    <tr><td>7</td><td>8</td><td><button>9</button></td></tr>
</table>

您可能会发现您不必那么具体。例如，如果每行只有一个按钮：

document.querySelector("table tr:nth-child("+i+") button").innerHTML = "ButtonText";
相关文章：