插入的代码并没有符合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.  <form name="form1" >
  21.      <input name="ok" type="button" id="ok" value="显示" onclick="history_data('divc');" />
  22.  
  23.      <table id="divc" width="760" border="0" cellspacing="0" cellpadding="0"  style=" display:none">
  24.              <tr >
  25.                  <td bgcolor="#9966FF">table2 222</td>
  26.                  <td bgcolor="#9966FF">table2 333</td>
  27.                  <td bgcolor="#9966FF">table2 444</td>
  28.              </tr>
  29.              <tr>
  30.                 <td bgcolor="#9966FF">table2 555</td>
  31.                  <td bgcolor="#9966FF">table2 666</td>
  32.                  <td bgcolor="#9966FF">table2 777</td>
  33.              </tr>
  34.      </table>
  35.  </form>
  36.  
  37.  <script>
  38.  function history_data(TagName) {
  39.     var obj = document.getElementById(TagName);
  40.     if (document.form1.ok.value=="显示")
  41.     {
  42.       document.form1.ok.value="隐藏";
  43.           obj.style.display = "";
  44.     }
  45.     else
  46.     {
  47.       document.form1.ok.value="显示";
  48.       obj.style.display = "none";
  49.     }
  50.  }
  51.  </script>
  52.  
  53.  </body>
  54.  </html>

贴两张效果图：

原始图：

点击显示之后的图：

利用JavaScript实现动态显示表格且对应改变按键的value值的更多相关文章

  1. 利用javascript动态创建表格

    //说明:实现功能.原理上文相同.不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能! 效果图: /*两个方法 1.  trNode  table.insertRow(-1)    ...

  2. js如何实现动态显示表格数据（点奇数显示奇数单元格内容）

    js如何实现动态显示表格数据(点奇数显示奇数单元格内容) 一.总结 一句话总结: 1.动态指定表格中每个单元格的id,然后通过id可以获取每个单元格,然后对里面的innerHTML进行赋值. 2.弄了 ...

  3. 利用Javascript判断操作系统的类型实现不同操作系统下的兼容性

    原文地址 http://www.jb51.net/article/33640.htm 在通过Javascript实现客户端和服务端的交互时,有时候需要对操作系统进行判断,以便实现不同操作系统下的兼容性 ...

  4. 利用javascript:void(0)制作假的提交按钮替代button

    在写html页面,我们很自然的在表单提交的地方采用button来作为提交按钮,但是,用<button type=”button”>按钮</button>作为提交代码会有个问题, ...

  5. 利用JavaScript选择GridView行

    本篇技巧和诀窍记录的是:利用JavaScript选择GridView行. 当我们想在GridView中添加删除.选择功能时,我们通常的做法是利用模板功能在每行添加一个按钮控件或者超链接按钮控件,单击按 ...

  6. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 在开始之前,你需要了解一些基本的知识,不要求你能掌握,但是了解一下还是有益的: HTML 简 ...

  7. HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 03

    工具1:HBuilder X 1.9.9.20190522 工具2:火狐浏览器 67.0.4 (64 位) 其实,我还想使用表格,做一个这样的颜色表,如下图所示: 如果按照之前的做法,把每一种颜色都列 ...

  8. 利用JavaScript函数对字符串进行加密

    加密.解密问题对我来说一直是很神秘的,感到神奇无比. 理论了解 前段时间看到关于利用JavaScript函数unescape()和escape()对字符串进行替换处理.通过查资料得知, escape( ...

  9. 利用javascript和WebGL绘制地球 【翻译】

    利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...

随机推荐

  1. 【个人笔记】《知了堂》node.js简介及创建应用

    Node.js是什么? Node.js是建立在谷歌Chrome的JavaScript引擎(V8引擎)的Web应用程序框架.Node.js自带运行时环境可在Javascript脚本的基础上可以解释和执行 ...

  2. Codeforce 854 A. Fraction

    A. Fraction time limit per test 1 second memory limit per test 512 megabytes input standard input ou ...

  3. hdu 5937 -- Equation(搜索)

    题目链接 problem description Little Ruins is a studious boy, recently he learned addition operation! He ...

  4. Collecting Bugs poj2096 概率DP

                                                                Collecting Bugs Time Limit: 10000MS   Me ...

  5. ubuntu命令查询版本和内核版本

    1.查看ubuntu版本号: 方法一: cat  /etc/issue 返回结果: Ubuntu 6.06.2 LTS \n \l   方法二: sudo lsb_release -a  返回结果: ...

  6. sql server作业实现数据同步

    作业介绍  SQL SERVER的作业是一系列由SQL SERVER代理按顺序执行的指定操作.作业可以执行一系列活动,包括运行Transact-SQL脚本.命令行应用程序.Microsoft Acti ...

  7. 国内为什么没有好的 Stack Overflow 的模仿者？，因为素质太低？没有分享精神?

    今天终于在下班前搞定一个技术问题,可以准时下班啦.当然又是通过StackOverflow找到的解决思路,所以下班路上和同事顺便聊起了它,两个资深老程序猿,还是有点感叹,中国的程序员群体人数应该不少,为 ...

  8. IDEA Maven 三层架构 2、运行 springMVC

    运行 SpringMVC 首先要理解 SpringMVC 应用程序的入口是配置文件 web.xml,其路径为"src/main/webapp/WEB-INF/web.xml",通过 ...

  9. ELK简介

    什么是ELK ELK是ElasticSearch,LogStash以及Kibana三个产品的首字母缩写.是可以和商业产品 Splunk 相媲美开源项目. 2013 年,Logstash 被 Elast ...

  10. 基于8211lib库对s57电子海图的解析和存储

    电子海图是为适用航海需要而绘制的包含海域地理信息和航海信息的一种数字化的专题地图,符合国际标准的电子海图数据统称为S-57电子海图.本文主要在S-57电子海图数据的理论模型和数据结构的基础上,实现对S ...