使用带有 innerHTML 的 javascript 更改 table 数据

Question

我正在尝试一种基本方案，我想通过 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>

我能看到它正在发生变化，但价值并没有保持原样。

我的错误是什么？

Answer 1

您的代码似乎无法正常工作，因为在单击锚标记后您的页面已重新加载。试试下面的代码。我刚刚添加了 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>

使用带有 innerHTML 的 javascript 更改 table 数据

Changing table data using javascript with innerHTML

html

javascript

html-table