gpt4 book ai didi

javascript - 使用 javascript 更改表格内段落内容时出现问题

转载 作者:行者123 更新时间:2023-12-02 16:35:24 25 4
gpt4 key购买 nike

我对 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/

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