插入的代码并没有符合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. 第一次安装jshint，jshint新手使用记录

    刚刚出来工作的渣渣,第一次进入这样比较正规的公司,各个开发流程都比较严格,代码也是要经过jshint的检测才能上传到svn才能成功打包项目.所以我这种技术都半桶水的职场开发小白,也是第一次用jshin ...

  2. 第6章 Overlapped I/O， 在你身后变戏法 ---1

    这一章描述如何使用 overlapped I/O(也就是 asynchronous I/O).某些时候 overlapped I/O 可以取代多线程的功用.然而,overlapped I/O 加上co ...

  3. bzoj1027 [HNOI2004]打鼹鼠

    [HNOI2004]打鼹鼠 2014年5月2日2,8605 Description 鼹鼠是一种很喜欢挖洞的动物,但每过一定的时间,它还是喜欢把头探出到地面上来透透气的.根据这个特点阿Q编写了一个打鼹鼠 ...

  4. MyEclipse的JQuery.min.js报错红叉解决办法

    MyEclipse的JQuery.min.js报错红叉解决办法 1.选中报错的jquery文件"jquery-1.2.6.min.js".2.右键选择 MyEclipse--> ...

  5. Web服务器自定义错误页面

    在使用Web服务器运行程序的时候,难免会出现诸如 404.500 等错误,那么如何针对不同的错误代码来自定义错误页面呢? 1.找到web项目的 web.xml 文件打开,添加以下标签代码,规则是 er ...

  6. tesseract-ocr字库训练图文讲解

    第一步合成图片集 你需要把使用jTessBoxEditor工具把你的训练素材及多张图片合并成一张tif格式的图片集 第二步  生成box文件 运行tesseract命令,tesseract mjorc ...

  7. (原)怎样解决python dataframe loc，iloc循环处理速度很慢的问题

    怎样解决python dataframe loc,iloc循环处理速度很慢的问题 1.问题说明 最近用DataFrame做大数据 处理,发现处理速度特别慢,追究原因,发现是循环处理时,loc,iloc ...

  8. 给vue项目添加ESLint

    eslint配置方式有两种: 注释配置:使用js注释来直接嵌入ESLint配置信息到一个文件里 配置文件:使用一个js,JSON或者YAML文件来给整个目录和它的子目录指定配置信息.这些配置可以写在一 ...

  9. Ubuntu安装Java8和Java9

    前言 系统:Ubuntu 16.04 软件: Java8, Java9 Tips: Java 9 的代码由于提供了新特性,所以有些代码并不支持向后兼容.也就是说,用 Java 9 写的代码,有可能在 ...

  10. Javascript之pixi框架学习

    pixi 创建渲染器(renderer) 创建一个可以播放动画的区域,相当于(canvas). var renderer = PIXI.autoDetectRenderer(512, 512); do ...