在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].innerHTML="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";