我对 html 和 Javascript 相当陌生(我正在参加 ATM 网页设计类(class))，但我是一名优秀的程序员(在 C#、C++、Visual Basic、Java 和其他一些方面有经验)并且我'我相当擅长调试东西。现在来说说好东西 =)。
我正在尝试更改表格内段落标记的文本内容。这就是有趣的地方。我试图通过用户从下拉列表中选择一个单元格，然后在文本字段中输入文本，最后按下按钮来设置它来完成此操作。我的下拉列表中的选项值与单元格中段落的 id 完全相同。当您点击按钮时，它会存储(理论上无法尝试)下拉列表中所选项目的值和文本字段中的文本，然后将段落内的 html(带有 .innerHtml)设置为中的文本文本框。它使用我存储所选选项的 var 作为 .getElementId() 调用中的 id，并使用文本 var 作为要设置的内容。我不知道是否还有什么需要解释的，所以这里是包含 Javascript 的整个 htm 文件。
<HTML>
<HEAD>
<TITLE>Table Pg 1</TITLE>
</HEAD>
<BODY background="http://www.pptbackgrounds.net/uploads/elegant-grey-illumination-background-presentations-powerpoint-backgrounds.jpg" link="#FF00FF" alink="#9900FF" vlink="#0000FF" text="#00FF00">
<SCRIPT>
var tableOneBorder = 1;
function incBorder()
{
tableOneBorder = tableOneBorder + 1;
document.getElementById("tab1").setAttribute("border", tableOneBorder);
}
function decBorder()
{
if(tableOneBorder > 0)
{
tableOneBorder = tableOneBorder - 1;
}
document.getElementById("tab1").setAttribute("border", tableOneBorder);
}
function changeContent()
{
var cell = document.getElementById("dropDown")[document.getElementById("dropDown").selectedIndex].value;
var text = document.getElementById("textField").value;
document.getElementById(cell).innerHtml = text;
}
</SCRIPT>
<BUTTON onclick="decBorder()">Decrease Border</BUTTON> <BUTTON onclick="incBorder()">Increase Border</BUTTON>
<BR>
<BR>
Enter text, select cell, and click 'Change' to change a cell:
<INPUT type="text" id="textField"/>
<select id="dropDown">
<option value="a1">A1</option>
<option value="a2">A2</option>
<option value="a3">A3</option>
<option value="a3">A4</option>
<option value="b1">B1</option>
<option value="b2">B2</option>
<option value="b3">B3</option>
<option value="a3">B4</option>
<option value="c1">C1</option>
<option value="c2">C2</option>
<option value="c3">C3</option>
<option value="a3">C4</option>
</select>
<BUTTON onclick="changeContent()">Change Text</BUTTON>
<BR>
<BR>
<BR>
<TABLE id="tab1" border="1" width="80%" align="center" wrap="hard">
<TR height="100"> <TD><P align="center" id="a1">TEST</P></TD> <TD><P align="center" id="a2">TEST</P></TD> <TD><P align="center" id="a3">TEST</P></TD> <TD><P align="center" id="a4">TEST</P></TD></TR>
<TR height="100"> <TD><P align="center" id="b1">TEST</P></TD> <TD><P align="center" id="b2">TEST</P></TD> <TD><P align="center" id="b3">TEST</P></TD> <TD><P align="center" id="b4">TEST</P></TD></TR>
<TR height="100"> <TD><P align="center" id="c1">TEST</P></TD> <TD><P align="center" id="c2">TEST</P></TD> <TD><P align="center" id="c3">TEST</P></TD> <TD><P align="center" id="c4">TEST</P></TD></TR>
</TABLE>
</BODY>
最佳答案
一切都很好..只是一个愚蠢的错误..:) 请用“innerHTML”替换“innerHtml”，如下所示:
document.getElementById(cell).innerHTML = text;
在此链接中了解更多信息.. innerHTML
如果不需要 HTML 内容，您还可以使用“textContent”。
关于javascript - 使用 javascript 更改表格内段落内容时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27976700/