插入的代码并没有符合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. S2_OOP第二章

    第一章 继承 语法 修饰符 子类 extends 父类{ //类定义不封 } 使用extends继承父类的属性和方法.使用super关键字调用父类的方法. 概念 继承是面向对象的三大特特之一,Java ...

  2. Python多线程练习（threading）

    这几天学习python多线程的时候,试了几次thread模块和threading模块,发现thread模块非常的不好用.强烈不建议大家使用thread,建议使用threading模块,此模块对thre ...

  3. 简单又炫酷的two.js 二维动画教程

      前  言 S     N 今天呢给大家介绍一个小js框架,Two.JS.其实在自己学习的过程中并没有找到合适的教程,所以我这种学习延迟的同学是有一定难度的,然后准备给大家整理一份,简单易懂的小教程 ...

  4. C# 使用FileUpload控件上传图片，将文件转换成二进制进行存储与读取

    状况描述: 需要上传文件,但是不想要保存到实体路径下,便可以用该功能来实现. 效果图: 点击[Upload]按钮,上传文件到数据库: 点击[Preview],预览文件: 具体实现: 前台: <t ...

  5. jsp web JavaBean MVC 架构 EL表达式 EL函数 JSTL

     一.JavaBean概念(非常重要) 1.JavaBean就是遵循一定书写规范的Java类型(开发中:封装数据) a.必须有默认的构造方法,类必须是public的   public class  ...

  6. Telerik 控件 RadGridview实现绑定

    0.使用MiroModes框架请先阅读http://blogs.telerik.com/blogs/posts/10-01-20/micromodels_for_silverlight.aspx 1. ...

  7. 【特效】hover效果之十字动画

    效果预览:http://www.gbtags.com/gb/rtreplayerpreview-standalone/3101.htm html: <div class="wrap&q ...

  8. selenium python grid

    学习自动化一直都是在本机操作,感觉这样能够减少工作量确实很少.最近研究了一下分布式操作. 开始的想法是,我在一台机器上启动脚本,然后让脚本在不同机器的不同版本的浏览器上进行跑脚本. 需要准备的东西: ...

  9. win10 uwp clone

    clone 可以用MemberwiseClone来复制一个类 但这个复制是浅复制,创建一个新的object然后复制值字段,对于引用就直接复制引用,不复制引用的本身,指向同样引用 如果要复制引用,可以使 ...

  10. OpenWRT 恢复出厂设置命令

    如果通过无线或者有线口无法连接到router,可以用恢复某些设置重新设置路由器. 1. 开机,等着一个工作灯亮的时候立即按下rest键2秒,然后就开始拼命闪烁,很好现在进入failsafe模式了. 2 ...