gpt4 book ai didi

javascript - 使用带有 innerHTML 的 javascript 更改表数据

转载 作者:行者123 更新时间:2023-11-30 12:20:15 25 4
gpt4 key购买 nike

我正在尝试一种基本场景,我想通过 innerHTML 使用 javascript 更改 td 内容。

<html>
<head>
<script>
function changeContent(obj) {
var elem = obj.name;
//alert("obj : "+obj.name);
alert("before : "+document.getElementById("mainContent").innerHTML);
document.getElementById("mainContent").innerHTML = "wow";
alert("after : "+document.getElementById("mainContent").innerHTML);
/*
if(elem == "home") {
} else if (elem == "careers") {
} else if (elem == "policies") {
} else if (elem == "contactus") {
} else if (elem == "feedback") {
} else {
}
*/
}
</script>
</head>

<table class="frame" border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">

<tr style="background-color : #87ceeb">
<td height="100" class="frameTop" colspan="2">
<h1><center>EMBLEM IS HERE<center></h1>
</td>
</tr>

<tr rowspan="0">
<td width="20%" class="frameCenter" >
<form>
<a href="" name="home" onclick="changeContent(this)">Home</a><br/>
<a href="" name="careers" onclick="changeContent(this)">Careers</a><br/>
<a href="" name="policies" onclick="changeContent(this)">Policies</a><br/>
<a href="" name="contactus" onclick="changeContent(this)">Contact Us</a><br/>
<a href="" name="feedback" onclick="changeContent(this)">Feedback</a><br/>
</form>
</td>
<td class="frameCenter" id="mainContent">
</td>
</tr>

<tr>
<td height="10" class="frameBottom" colspan="2">
Bottom area
</td>
</tr>

</table>
</html>

我能够看到它正在发生变化,但值(value)并没有保持原样。

我的错误是什么?

最佳答案

您的代码似乎无法正常工作,因为在单击 anchor 标记后您的页面已重新加载。试试下面的代码。我刚刚添加了 href="#"

<html>
<head>
<script>
function changeContent(obj) {
var elem = obj.name;
//alert("obj : "+obj.name);
alert("before : "+document.getElementById("mainContent").innerHTML);
document.getElementById("mainContent").innerHTML = "wow";
alert("after : "+document.getElementById("mainContent").innerHTML);
/*
if(elem == "home") {
} else if (elem == "careers") {
} else if (elem == "policies") {
} else if (elem == "contactus") {
} else if (elem == "feedback") {
} else {
}
*/
}
</script>
</head>

<table class="frame" border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">

<tr style="background-color : #87ceeb">
<td height="100" class="frameTop" colspan="2">
<h1><center>EMBLEM IS HERE<center></h1>
</td>
</tr>

<tr rowspan="0">
<td width="20%" class="frameCenter" >
<form>
<a href="#" name="home" onclick="changeContent(this)">Home</a><br/>
<a href="#" name="careers" onclick="changeContent(this)">Careers</a><br/>
<a href="#" name="policies" onclick="changeContent(this)">Policies</a><br/>
<a href="#" name="contactus" onclick="changeContent(this)">Contact Us</a><br/>
<a href="#" name="feedback" onclick="changeContent(this)">Feedback</a><br/>
</form>
</td>
<td class="frameCenter" id="mainContent">
</td>
</tr>

<tr>
<td height="10" class="frameBottom" colspan="2">
Bottom area
</td>
</tr>

</table>
</html>

关于javascript - 使用带有 innerHTML 的 javascript 更改表数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31357199/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com