插入的代码并没有符合HTML5样式,只是为了实现利用JS动态显示表格,并且按键的value值会同时发生变化的功能。
1 <!DOCTYPE > 2 <html > 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 </head> 6 <body> 7 <table width="760" border="0" cellspacing="0" cellpadding="0"> 8 <tr > 9 <td bgcolor="#00CCFF">222</td> 10 <td bgcolor="#00CCFF">333</td> 11 <td bgcolor="#00CCFF">444</td> 12 </tr> 13 <tr > 14 <td bgcolor="#00CCFF">555</td> 15 <td bgcolor="#00CCFF">666</td> 16 <td bgcolor="#00CCFF">777</td> 17 </tr> 18 </table> 19 20 21 <form name="form1" > 22 <input name="ok" type="button" id="ok" value="显示" onclick="history_data('divc');" /> 23 24 <table id="divc" width="760" border="0" cellspacing="0" cellpadding="0" style=" display:none"> 25 <tr > 26 <td bgcolor="#9966FF">table2 222</td> 27 <td bgcolor="#9966FF">table2 333</td> 28 <td bgcolor="#9966FF">table2 444</td> 29 </tr> 30 <tr> 31 <td bgcolor="#9966FF">table2 555</td> 32 <td bgcolor="#9966FF">table2 666</td> 33 <td bgcolor="#9966FF">table2 777</td> 34 </tr> 35 </table> 36 </form> 37 38 <script> 39 function history_data(TagName) { 40 var obj = document.getElementById(TagName); 41 if (document.form1.ok.value=="显示") 42 { 43 document.form1.ok.value="隐藏"; 44 obj.style.display = ""; 45 } 46 else 47 { 48 document.form1.ok.value="显示"; 49 obj.style.display = "none"; 50 } 51 } 52 </script> 53 54 </body> 55 </html>
贴两张效果图:
原始图:
点击显示之后的图: