使用javascript与innerHTML更改表格数据

我正在尝试一个基本场景，我想通过innerHTML使用javascript更改td内容。使用javascript与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>

我能够看到它正在改变，但价值并没有保留。

我的错误是什么？

来源

2015-07-11 Dinesh

当你说“价值不保留原样”时，你是什么意思？ “之后”是不是显示新价值？ –

它显示正确的价值。但是，然后'mainContent'再次变为空字符串。 – Dinesh

改变方式？你的意思是在回传之后？ –

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

来源

2015-07-11 12:36:48 kdlcruz

我的耻辱！这样愚蠢的错误。：（。非常感谢。：） – Dinesh

使用javascript与innerHTML更改表格数据

回答

相关问题