Question

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

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

我知道：

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

可以更改单元格中的文本，但我需要一个类似的功能来更改单元格中放置按钮的文本。

Answer 1

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

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>

的Javascript

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

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

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

Answer 2

像这样使用document.querySelector：

＆＃13;

var i = 2,
    j = 3;
document.querySelector("table tr:nth-child("+i+") > td:nth-child("+j+") > button").innerHTML = "ButtonText";

＆＃13;

<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>

＆＃13;

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

document.querySelector("table tr:nth-child("+i+") button").innerHTML = "ButtonText";

Answer 3

你可以在行和单元格中找到按钮：

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

http://jsfiddle.net/mghomoos/

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

3 个答案: