插入的代码并没有符合HTML5样式，只是为了实现利用JS动态显示表格，并且按键的value值会同时发生变化的功能。

 <!DOCTYPE >

 <html >

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 </head>

 <body>

 <table width="760" border="0" cellspacing="0" cellpadding="0">

     <tr >

         <td bgcolor="#00CCFF">222</td>

         <td  bgcolor="#00CCFF">333</td>

         <td  bgcolor="#00CCFF">444</td>

     </tr>

     <tr >

         <td bgcolor="#00CCFF">555</td>

         <td  bgcolor="#00CCFF">666</td>

         <td  bgcolor="#00CCFF">777</td>

     </tr>

 </table>

 <form name="form1" >

     <input name="ok" type="button" id="ok" value="显示" onclick="history_data('divc');" />

     <table id="divc" width="760" border="0" cellspacing="0" cellpadding="0"  style=" display:none">

             <tr >

                 <td bgcolor="#9966FF">table2 222</td>

                 <td bgcolor="#9966FF">table2 333</td>

                 <td bgcolor="#9966FF">table2 444</td>

             </tr>

             <tr>

                <td bgcolor="#9966FF">table2 555</td>

                 <td bgcolor="#9966FF">table2 666</td>

                 <td bgcolor="#9966FF">table2 777</td>

             </tr>

     </table>

 </form>

 <script>

 function history_data(TagName) {

    var obj = document.getElementById(TagName);

    if (document.form1.ok.value=="显示")

    {

      document.form1.ok.value="隐藏";

          obj.style.display = "";

    }

    else

    {

      document.form1.ok.value="显示";

      obj.style.display = "none";

    }

 }

 </script>

 </body>

 </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. window、linux系统与linux服务器之间使用svn同步及自动部署代码的方法

    摘要: 在家用PC,在公司用办公电脑对一个项目的代码进行修改时,会遇到代码同步的问题.本文讲解了代码同步及自动部署的解决办法. 实现方法: 1.首先在linux服务器上和linux上安装svn(sud ...

  2. 在MAC OS X中默认的Web共享目录

    在Mac OS X中可以很方便的通过开启"Web共享"启用Apache服务:设置方法如下: 打开"系统设置偏好(System Preferences)" -&g ...

  3. TCP/IP（二）物理层详解

    前言 在前面说了一下,计算机网络的大概内容,没有去深刻的去了解它,这篇文章给大家分享一下物理层! 我们知道ISO模型是七层,TCP/IP模型是五层,而tcp/ip协议只将七层概括为4层,我们将学习其中 ...

  4. 安装Appium

    1.Appium官方网站:http://appium.io/ 拉到页面底端显示下面一段描述: > brew install node # get node.js > npm install ...

  5. pdf去水印

    问: 我用Adobe acrobat professional 7.0 版想去掉添加的水印,不知道如何删除,请各位大 侠指点! 答:1.(功能表)工具→高级编辑工具→TouchUp对象工具 2.用滑鼠 ...

  6. “一切都是消息”--MSF（消息服务框架）之【请求-响应】模式

    在前一篇, “一切都是消息”--MSF(消息服务框架)入门简介, 我们介绍了MSF基于异步通信,支持请求-响应通信模式和发布-订阅通信模式,并且介绍了如何获取MSF.今天,我们来看看如何使用MSF来做 ...

  7. 通过JQuery实现Ajax代码

    今天早上遇到了这个问题,结果我写的顺序是惨不忍睹啊,所有现在留个模版以示标准. $(function(){ $.ajax({ url : "Servlet", //传地址 type ...

  8. clone github报Permission denied (publickey) 解决方案

    问题描述 问题产生的原因,不是很清楚,就不管了.在执行git clone git@github.com:****.git 的时候报了Permission denied (publickey). War ...

  9. mysql导出数据库和恢复数据库代码

    mysql导出数据库和备份数据库 用mysqldump 命令行 命令格式 mysqldump -u 用户名 -p  数据库名 > 数据库名.sql 范例: mysqldump -uroot -p ...

  10. ConcurrentHashMap源码及分析

    ConcurrentHashMap是在jdk1.5版本开始,存在于java.util.concurrent包下.本文主要是针对jdk1.7版本. 由于HashMap是非线程安全的,HashTable虽 ...