CODEWITHSUNDEEP
javascripthtmlhtml-table
Dinesh
Dinesh

Reputation: 16436

Changing table data using javascript with innerHTML

I am trying out one basic scenario where I want to change td content using javascript by means of innerHTML. 

<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>

I am able to see that it is changing, but the value is not retaining as such.

What is my mistake ?

Upvotes: 1

Views: 2644

Answers (1)

kdlcruz
kdlcruz

Reputation: 1388

Your code seems not working because after clicking the anchor tag your page was reloaded. Try the code below. I just added 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>

Upvotes: 3

Related Questions