使用 javascript 更改 table 中的段落内容时出现问题

Question

我是 html 和 Javascript 的新手（我正在学习网页设计 class atm），但我是一名优秀的程序员（有 c#、c++ 经验） , visual basic, java, 和其他一些）而且我相当擅长调试东西。现在进入好东西 =).

我正在尝试更改 table 中段落标记的文本内容。这就是它变得有趣的地方。我试图通过用户从下拉列表中选择一个单元格，然后将文本输入文本字段，然后最后按下一个按钮来设置它来做到这一点。我在下拉列表中选择的值与单元格中段落的 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>

Answer 1

一切都很好..只是一个愚蠢的错误..:) 请将 'innerHtml' 替换为 'innerHTML'，如下所示：

document.getElementById(cell).innerHTML = text;

在此 link 中了解更多信息.. innerHTML

你也可以使用'textContent'，如果不需要HTML内容..

使用 javascript 更改 table 中的段落内容时出现问题

Problems changing the content of a paragraph within a table using javascript

html

javascript

html-table

paragraph