文档章节

表格中使用tboy展开和隐藏例子

我爱祥子
 我爱祥子
发布于 2015/10/21 22:05
字数 375
阅读 34
收藏 2
姓名 姓名 姓名
第一列 第二列 第三列
第一列 第二列 第三列
第一列 第二列 第三列
第一列 第二列 第三列
展开第三方快递
第1列 第二列 第三列
第1列 第二列 第三列
第1列 第二列 第三列
第1列 第二列 第三列


<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        
        <table border="1" width="800px">
            <tbody>
                <tr><th width="200px">姓名</th><th width="200px">姓名</th><th width="400px">姓名</th></tr>

                <tr><td>第一列</td><td>第二列</td><td>第三列</td></tr>
                <tr><td>第一列</td><td>第二列</td><td>第三列</td></tr>
                <tr><td>第一列</td><td>第二列</td><td>第三列</td></tr>
                <tr><td>第一列</td><td>第二列</td><td>第三列</td></tr>
                <tr style="text-align: center"><td colspan="3"><a href="javascript:void(0)" onclick="showOther();" id="swidText">展开第三方快递</a></td></tr>
                
            <tbody width="800px" id="lgx" style="display: none">
                <tr><td>第1列</td><td>第二列</td><td>第三列</td></tr>
                <tr><td>第1列</td><td>第二列</td><td>第三列</td></tr>
                <tr><td>第1列</td><td>第二列</td><td>第三列</td></tr>
                <tr><td>第1列</td><td>第二列</td><td>第三列</td></tr>
            </tbody>
            
            </tbody>
        </table>   
    </body>
    
<script type="text/javascript">
    function showOther(){
        var lgx=document.getElementById('lgx');
        var swidText = document.getElementById('swidText');
        if(lgx.style.display=='none'){ // == 判断div.display是否为显示
                lgx.style.display=''; //= 赋值也可了解成改
                swidText.innerHTML = '隐藏第三方快递--';
            }
            else{
                lgx.style.display='none';
                swidText.innerHTML = '展开第三方快递++';
            }
     }
</script>
</html>


© 著作权归作者所有

我爱祥子
粉丝 2
博文 57
码字总数 27333
作品 0
北碚
高级程序员
私信 提问
chrome控制台调试学习笔记 暂未整理

15:03 2015/12/7 chrome控制台调试学习: 推荐博客:http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html console.log 普通提示信息,可以自己打印需要的内容或变量 可以结...

兔子想飞
2015/12/31
0
0
Fixcel电子表单——前端动作脚本(三):数据弹出选取

表格选取 弹出二维表,选取一行或多行,提取选中行所需字段填充到表单里。 如下图:填写关键字,调用后台服务查询出相关的数据列表并返回,然后弹出表格显示选取。 键盘操作:上、下箭头按键...

彭博
2012/03/09
83
0
Popover 弹出框用法总结及其弹出隐藏问题

引言 最近项目中多次用到了Popover弹出框,在使用时,也遇到了一些坑,比如如何控制显示和隐藏,及在表格数据中如何针对当条数据进行显示和隐藏,所以对Popover相关知识做了一个总结。 Popo...

启晨1991
11/02
0
0
Fixwin电子窗体——弹出框控件与弹出窗体

通过弹出框控件以及相关函数实现窗体中的数据选取、交互。 弹出框控件 ShowList函数用于弹出列表显示,选择一个列表项返回到窗体。 显示列表:ShowList(array, label, changeCallback, hide...

彭博
2012/03/09
178
0
怎么在文件对比工具比较会话时隐藏工具栏

作为一款实用的文件和文件夹比较工具,Beyond Compare软件操作简单,功能全面。为了帮助用户更好的执行比较会话操作。每一个比较会话界面都设置了独一无二的工具栏,其中工具栏提供各种编辑工...

Navicat数据库管理工具
2016/11/14
49
0

没有更多内容

加载失败,请刷新页面

加载更多

vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础

作者 | Jeskson 来源 | 达达前端小酒馆 Vue概述: MVX模式简介,Vue框架简介,Vue.js的安装与使用。 Vue基础语法: 实例对象,生命周期,模板语法,计算属性,methods方法 Vue渲染: 列表渲染...

达达前端小酒馆
今天
4
0
OSChina 周五乱弹 —— 匹诺曹也是韩国人

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @watergood :分享海先生的单曲《烟花巷》 《烟花巷》- 海先生 手机党少年们想听歌,请使劲儿戳(这里) @Cyber-Pan :已经很久没有十点前下过...

小小编辑
今天
8
1
Snack3 之 Jsonpath使用

Snack3 之 Jsonpath使用 一、 Snack3 和 JSONPath 介绍 Snack3 是一个支持JSONPath的JSON框架。JSONPath是一个很强大的功能,也可以在Java框架中当作对象查询语言(OQL)来使用。 <dependenc...

刘之西东
今天
5
0
7. 彤哥说netty系列之Java NIO核心组件之Selector

<p align="right">——日拱一卒,不期而至!</p> 你好,我是彤哥,本篇是netty系列的第七篇。 简介 上一章我们一起学习了Java NIO的核心组件Buffer,它通常跟Channel一起使用,但是它们在网络...

彤哥读源码
昨天
21
0
在Jupyter notebooks 中运行GRASS GIS

在Ubuntu16.04中,首先安装jupyter: python3 -m pip install --upgrade pippython3 -m pip install jupyter 然后创建一个sh脚本: # directory where GRASS GIS lives# GRASS GIS 的安装......

ddd口木呆
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部