插入的代码并没有符合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. 如何面试 PHP 工程师？

    1,解决问题的能力和掌握的知识,看你招聘的目的而决定其二者的平衡.了解流体力学的确会对通下水道有很大帮助,但流体力学专家未必都会疏通下水道. 2,创造力,一个没有自己作品的程序员不是好程序员.编程跟写 ...

  2. Angularjs-Forms(表单)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Angular表单 input, select, textarea控件都是给用户输入数据 ...

  3. Linux入门之常用命令（1）

    退出系统 exit 图形界面 startx 时间 date 日历 cal [month] [year] 计算器 bc 帮助 man [command]  // info [command] 在线用户 ...

  4. 代理模式与java中的动态代理

    前言    代理模式又分为静态代理与动态代理,其中动态代理是Java各大框架中运用的最为广泛的一种模式之一,下面就用简单的例子来说明静态代理与动态代理. 场景    李雷是一个唱片公司的大老板,很忙, ...

  5. hdu1540 区间操作，合并，模板题

    During the War of Resistance Against Japan, tunnel warfare was carried out extensively in the vast a ...

  6. C#实现断点续传

    断点续传的原理在了解HTTP断点续传的原理之前,先来说说HTTP协议,HTTP协议是一种基于tcp的简单协议,分为请求和回复两种.请求协议是由客户机(浏览器)向服务器(WEB SERVER)提交请求时 ...

  7. iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享

  8. Ricequant-米筐金工-估值因子

    Ricequant米筐金工--因子分析 作者:戴宇.小湖 上一篇介绍了单因子检验是因子分析前重要的一个步骤,是构建因子库.建立因子模型的基础,这篇报告首先对常见估值因子进行初步的检验. 第一篇．估值因 ...

  9. C#基础之转换

    C#中一共有两种转换方式,隐式转换和显示转换 隐式转换:就是不需要声明就能进行的转换,通俗来说就是小范围内的数据类型转大范围数据类型 显示转换:就是通常说的强制转换,需要在代码中写明要的数据类型.通俗 ...

  10. win10 uwp 上传Nuget 让别人用我们的库

    Nuget 我们的开发经常使用别人的dll,那么我们需要每次都从网上下载,然后复制到我们的项目, 而不知道我们的dll是否安全? 当我们的库更新的时候,我们又需要从网上搜索,这样不好,于是我们就用Nu ...