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

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更改表数据

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-07-11 12:36:48

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

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-07-11 12:36:48

解决方案1
3 已采纳 2015-07-11 12:36:48