我想更改td标签内的按钮（请参见底部的示例）。
var tableEntryButton = document.getElementById('slButton' + message.content[1])
正确提供我要查找的td元素：
<td id="slButtonAudi" data-value="false">
<button id="slButtonActive" class="btn btn-outline-success btn-sm" type="button" onclick="handleClickOnSSButton(this)">Start</button>
</td>
在这里，我的功能应该使更改成为可能。在这里，我通过button标签中的ID来区分可以应用的更改（删除当前的开始/停止按钮并添加具有相反功能的按钮）
var tableEntryButton = document.getElementById('slButton' + message.content[1])
let activeButton = '<button id="slButtonActive" class="btn btn-outline-success btn-sm" type="button" onclick="handleClickOnSSButton(this)">Start</button>'
let inactiveButton = '<button id="slButtonInactive" class="btn btn-outline-warning btn-sm" type="button" onclick="handleClickOnSSButton(this)">Stop</button>'
if (tableEntryButton.innerHTML.includes('slButtonActive')) {
tableEntryButton.removeChild(tableEntryButton.firstChild)
tableEntryButton.innerHTML = inactiveButton
}
else {
tableEntryButton.removeChild(tableEntryButton.firstChild)
tableEntryButton.innerHTML = activeButton
}
if / else分配正常工作。
似乎只有if / else语句中的更改不被采用。
这里要举例说明。
如果给出：
<td id="slButtonAudi" data-value="false">
<button id="slButtonActive" class="btn btn-outline-success btn-sm" type="button" onclick="handleClickOnSSButton(this)">Start</button>
</td>
应该更改为：
<td id="slButtonAudi" data-value="false">
<button id="slButtonInactive" class="btn btn-outline-warning btn-sm" type="button" onclick="handleClickOnSSButton(this)">Stop</button>
</td>
您没有正确使用innerHtml。
我为您提供了一个示例，该示例将完全按照您在上一个示例中的要求进行操作。
if (tableEntryButton.innerHTML.includes('slButtonActive')) {
//Get the children button.
let button = tableEntryButton.querySelector("#slButtonActive");
if (button) {
tableEntryButton.removeChild(button);
tableEntryButton.innerHTML += inactiveButton;
}
}
这是工作的小提琴：https : //jsfiddle.net/vrtfoh9q/20/
一些文档：https : //plainjs.com/javascript/manipulation/append-or-prepend-to-an-element-29/ https://www.w3schools.com/js/js_htmldom_nodes.asp
希望能帮助到你！
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句