Question

我对html和Javascript相当陌生（我正在参加网页设计课程）但我是一名优秀的程序员（在c＃，c ++，visual basic，java等方面经验丰富其他）我非常擅长调试东西。现在进入好东西=）。

我试图更改表格内部的段落标记的文本内容。在这里，它变得有趣。我尝试通过用户从下拉列表中选择一个单元格然后将文本输入文本字段，然后最后按下按钮进行设置来尝试。我在下拉列表中的选项值与单元格中段落的ID完全相同。当你点击按钮时，它存储（理论上还没有能够尝试）下拉列表中所选项目的值和文本字段中的文本，然后将段落中的html（带.innerHtml）设置为文本框中的文本。它使用我存储所选选项的var作为.getElementId()调用中的id，使用text 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

一切都很好..只是一个愚蠢的错误.. :) 请替换＆inner;内部HTML＆＃39;与＆lt; innerHTML＆＃39;如下所示：

document.getElementById（cell）.innerHTML = text;

在此链接中详细了解相关内容.. innerHTML

如果不需要HTML内容，您也可以使用＆＃39; textContent＆＃39;

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

1 个答案: