使用 class/id 在 JavaScript 中编辑 innerHtml 不起作用

嗨，我尝试使用 Javascript 将类和 id 添加到我的 innerHtml 文本中，但完成后，它没有显示它应该在单击时显示的文本所以我想知道如何在不使用类或 id 的情况下在那里编辑文本这是我下面的代码

<!DOCTYPE html>
<html lang="en">
<body>
<button id="myb">AAAAAAA</button>
<table id="t01">
<tr>
<th></th>
<th><p>Monday</p></th> 
<th><p>Tuesday</p></th>
<th><p>Wednesday</p></th>
<th><p>Thursday</p></th>
<th><p>Friday</p></th>
<th><p>Saturday</p></th>
<th><p>Sunday</p></th>
</tr>
<tr>
<td class="black-mamba"><p>8:00AM</p></td>
<td><p>Smith</p></td>
<td><p>50</p></td>
<td><p>Smith</p></td>
<td><p>50</p></td>
<td><p>Smith</p></td>
<td><p>50</p></td>
<td><p>Smith</p></td>
</tr>
</table>
<script type="text/javascript">
document.getElementById("myb").onclick = function() {
document.getElementById("t01").innerHTML = "<table><tr><th>Firstname</th><th>Lastname</th> <th>Age</th></tr><tr><td>Jill</td><td>ggggSmith</td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr><tr><td>John</td><td>Doe</td><td>80</td></tr></table>";
}
</script>
</body>
</html>

我相信你用错了onclick。

.HTML：

<button id="myb" onclick="bCLick()">Some Text</button>
<table id="t01">
<tr>
<th></th>
<th><p>Monday</p></th> 
<th><p>Tuesday</p></th>
<th><p>Wednesday</p></th>
<th><p>Thursday</p></th>
<th><p>Friday</p></th>
<th><p>Saturday</p></th>
<th><p>Sunday</p></th>
</tr>
<tr>
<td class="black-mamba"><p>8:00AM</p></td>
<td><p>Smith</p></td>
<td><p>50</p></td>
<td><p>Smith</p></td>
<td><p>50</p></td>
<td><p>Smith</p></td>
<td><p>50</p></td>
<td><p>Smith</p></td>
</tr>
</table>

JavaScript：

var button = document.getElementById("myb");
var table = document.getElementById("t01");
function bClick() { // Called when clicked
table.innnerHTML = "<span><table><tr><th>Firstname</th><th>Lastname</th> <th>Age</th></tr><tr><td>Jill</td><td>ggggSmith</td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr><tr><td>John</td><td>Doe</td><td>80</td></tr></table></span>";
}

虽然这有效，但我建议改用addEventListener，它更好的做法是：

.HTML：

<button id="myb" onclick="bCLick()">Some Text</button>
<table id="t01">
<tr>
<th></th>
<th><p>Monday</p></th> 
<th><p>Tuesday</p></th>
<th><p>Wednesday</p></th>
<th><p>Thursday</p></th>
<th><p>Friday</p></th>
<th><p>Saturday</p></th>
<th><p>Sunday</p></th>
</tr>
<tr>
<td class="black-mamba"><p>8:00AM</p></td>
<td><p>Smith</p></td>
<td><p>50</p></td>
<td><p>Smith</p></td>
<td><p>50</p></td>
<td><p>Smith</p></td>
<td><p>50</p></td>
<td><p>Smith</p></td>
</tr>
</table>

JavaScript：

var button = document.getElementById("myb");
var table = document.getElementById("t01");
button.addEventListener("click", () => { // Code inside is called when t01 is clicked
table.innerHTML = "<span><table><tr><th>Firstname</th><th>Lastname</th> <th>Age</th></tr><tr><td>Jill</td><td>ggggSmith</td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr><tr><td>John</td><td>Doe</td><td>80</td></tr></table></span>";
});

代码片段：

var button = document.getElementById("myb");
var table = document.getElementById("t01");
button.addEventListener("click", () => { // Code inside is called when t01 is clicked
table.innerHTML = "<span><table><tr><th>Firstname</th><th>Lastname</th> <th>Age</th></tr><tr><td>Jill</td><td>ggggSmith</td><td>50</td></tr><tr><td>Eve</td><td>Jackson</td><td>94</td></tr><tr><td>John</td><td>Doe</td><td>80</td></tr></table></span>";
});

<button id="myb">Some Text</button> <!-- No onclick -->
<table id="t01">
<tr>
<th></th>
<th><p>Monday</p></th> 
<th><p>Tuesday</p></th>
<th><p>Wednesday</p></th>
<th><p>Thursday</p></th>
<th><p>Friday</p></th>
<th><p>Saturday</p></th>
<th><p>Sunday</p></th>
</tr>
<tr>
<td class="black-mamba"><p>8:00AM</p></td>
<td><p>Smith</p></td>
<td><p>50</p></td>
<td><p>Smith</p></td>
<td><p>50</p></td>
<td><p>Smith</p></td>
<td><p>50</p></td>
<td><p>Smith</p></td>
</tr>
</table>

相关内容

最新更新

热门标签：