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

姓名 姓名 姓名
第一列 第二列 第三列
第一列 第二列 第三列
第一列 第二列 第三列
第一列 第二列 第三列
展开第三方快递
第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>
时间: 2024-08-06 07:58:50

表格中使用tboy展开和隐藏例子的相关文章

iOS开发——UI_swift篇&amp;UITableView实现单元格展开与隐藏

UITableView实现单元格展开与隐藏 下面是一个列表单元格cell的折叠展开效果的demo. 当点击单元格时会展开该单元格,便于显示一些详情什么的.点击其他单元格原来的会关闭,同时有动画效果. 效果如如下:   代码如下: 1 import UIKit 2 3 class ViewController: UIViewController,UITableViewDelegate, 4 UITableViewDataSource { 5 6 var tableView:UITableView?

(原创) cocos2d-x 3.0+ lua 学习和工作(4) : 公共函数(5): 返回指定表格中的所有键(key):table.keys

这里的函数主要用来做:返回指定表格中所有的键.参考资料为quick_cocos. 星月倾心贡献~~~ --[[ -- 返回指定表格中的所有键(key) -- example: local t = ( a = 1, b = 2, c = 3 ) local keys = table.keys( t ) -- keys = { "a", "b", "c" } -- @param t 要检查的表格(t表示是table) -- @param table

excel表格中如何将内容粘贴到筛选后的可见单元格[转]

默认情况下,筛选后excel表格进行复制粘贴,会贴到隐藏的表格. 可以添加两个辅助列来完成操作:1.在筛选前在表格右边添加"辅助1"列,在第二行输入1,按Ctrl+鼠标左键往下拉到相应行.2.执行你的"自动筛选"过程.3.在右边再添加的一"辅助2"列,用鼠标选定该列所有行,输入1,按Ctrl+回车.(即在所有筛选结果行的该列增加一个1,其他被隐藏的行该列为空白)4.退出筛选状态,将全表按"辅助2"列排序,你的筛选结果就集中在连

bootstarp-table表格中嵌套多个BUTON按钮实现

bootstarp-table表格中嵌套多个BUTON按钮实现 有时我们需要在bootsharp-table表格中嵌套多个按钮,来实现不同的功能,大概界面如下: 实现功能如下: 1:构建表格 中间部分字段已删除. visible: false  该列隐藏,界面不显示 events: operateEvents :给按钮注册事件 formatter: operateFormatter:表格中增加按钮 1 $("#TbRoleList").bootstrapTable({ 2 url: &

JS实现动态生成表格并提交表格数据向后端 表格中数据转为json

原文地址 需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 首先动态生成表格. 1.首先我们需要导入JS库文件.jQuery 2.然后在页面div中事先创建一个空白表格,可以根据需求而定,我这里是一个带表头的表格 <table border="0" style="text-align: center;" width="100%" id="myTable">

JQuery 获取表格中的数据

举个例子 var arr = $('#table tbody tr td:nth-child(2)') //根据id依次找到表格中的td,而后取每列的第二个值 .map(function () { return $(this).text() }) // 使用 map 对每一个 td 进行处理,function为回调函数,返回每个元素的text .get(); // 将对象集合转换为数组 另外还可以在后面.join(",") 这将转换成字符串. jQuery下有个概念叫"类数组

C# 如何在Excel表格中插入、编辑和删除批注

概述 为文档添加必要的批注可以给文档使用者提供重要的提示信息,下面的示例中,将介绍通过C#编程语言来给Excel表格中的指定单元格内容添加批注,此外,对于已有的批注,如果需要修改,我们也可以进行编辑或者删除批注.示例内容将包含以下主要内容:1.插入批注1.1 插入文本1.2 插入图片2.编辑批注2.1 修改批注内容2.1 设置批注可见性3.删除批注 工具 Spire.XLS for .NET 8.0 提示:在进行代码操作之前,需下载安装Spire.Xls,并添加引用dll文件,添加如下using

js获取表格中的数据 以及 表格中checkbox选中一行数据

前言 不知道是不是大家也遇到过类似的表单,但我绝对是第一次见,如下图所示,表单中包含了表格. 上图中的表格数据是根据数据库中学生表而变化的,这增加了获取表中数据的复杂程度,这里仅仅是记录js如何获取数据传值到后端的办法,所以,仅以表格中张三.李四为例. 示例代码 html <div class="modal-body"> <form id="exam-score-add-form" class="smart-form">

C#中导出数据到Excel表格中

之前PM交给我一个自动化测试的Case,让我抓取页面上的数据到Excel表格中,刚好又接了一个之前人家做的系统, 刚好看到可以用NPOI导数据,就动手试试,成功导出. 由于鄙人比较菜,也比较懒, 怕自己忘记了,今天就总结一下,以防下次用可以参考. 1.要使用NPOI,首先需要在Project中Install NPOI的 Package. 右键点击Project------>Manage NuGet Packages---->Search NPOI----->点击搜索到的NPOI然后点击等