table 折叠行的实现

最新推荐文章于 2023-12-01 11:47:46 发布
最新推荐文章于 2023-12-01 11:47:46 发布
阅读量2k 收藏
点赞数
分类专栏： HTML/CSS JAVASCRIPT 文章标签： CSS JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dzf203/article/details/9105079
版权

最终效果如下图所示：



<html>

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="styles/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="styles/themes/icon.css">
<link rel="stylesheet" type="text/css" href="styles/niceforms.css" />




<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/niceforms-default.js"></script>
<script>
    $(function() {
        bindToggle();
    });

    // 点击栏目展开或折叠
    function bindToggle() {
        $(".checkboxedittable").toggle(
        function(){
          $(this).next().hide();
 $(this).find("td").addClass("bottom_td");
},
        function(){
          $(this).next().fadeIn();
 $(this).find("td").removeClass("bottom_td");
}
        );
    }
</script>
<style>
.table_area {
padding: 5px;
}
.table_area td {
padding: 5px;
}
.table_area th {
background:#00af50;
margin-top:5px;
margin-bottom:10px;
font: bold; 
color:#FFF; 
font-size: 14px;
border-right:2 solid #FFF;
}


.top_td {
border-top: 2px solid #3d9c7e;
}
.right_td {
border-right: 2px solid #3d9c7e;
}
.bottom_td {
border-bottom: 2px solid #3d9c7e;
}
.left_td {
border-left: 2px solid #3d9c7e;
}
</style>


</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<form class="niceform" >
<div>
<div>
<div class="ShortcutMenuTitleDiv">
    <div class="ShortcutInsureTitleIconDiv">快捷投保</div>
    </div>
    <div class="anniudiv" align="right">
    <a id="searchBtn" href="javascript: void(0)" class="easyui-linkbutton" >新增</a>
    <a id="searchBtn" href="javascript: void(0)" class="easyui-linkbutton" >删除</a>
    </div>
<br />

    <table class="table_area" align="center" width="90%" border="0" cellpadding="0" cellspacing="0">
<tr>
            <th class="">&nbsp;</th>
            <th class="" align="center">方案名称</th>
            <th class="" align="center">出单员</th>
            <th class="" align="center">备注</th>
            <th class="" align="center">配置时间</th>
            <th class="" align="center">操作</th>
</tr>
<tr>
            <td style="height: 5px;" colspan="6"></td>
        </tr>
<tr class="checkboxedittable">
            <td class="top_td left_td">&nbsp;</td>
            <td class="top_td" align="center">北方第五代理点信息</td>
            <td class="top_td" align="center">张磊</td>
            <td class="top_td" align="center">第五代理店信息关联+异议处理方式</td>
            <td class="top_td" align="center">2013/05/02</td>
            <td class="top_td right_td" align="center">编辑</td>
        </tr>
        <tr>
            <td class="left_td bottom_td right_td" colspan="6">


<div class="editdiv">
<table width="100%">
<tr>
<td colspan="6">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销售信息</td>
</tr>
<tr>
<td colspan="6">
<table width="100%" style="background:#eee;">
<tr >
<td class="t">销售渠道：</td>
<td class="t"></td>
<td class="t">归属部门：</td>
<td class="t"></td>
<td class="t">业务来源：</td>
<td class="t"></td>
</tr>
<tr>
<td class="t">销售渠道：</td>
<td class="t"></td>
<td class="t">归属部门：</td>
<td class="t"></td>
<td class="t">业务来源：</td>
<td class="t"></td>
</tr>
<tr>
<td class="t">销售渠道：</td>
<td class="t"></td>
<td class="t">归属部门：</td>
<td class="t"></td>
<td class="t">业务来源：</td>
<td class="t"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="6">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;其他信息</td>
</tr>
<tr>
<td colspan="6">
<table width="100%" style="background:#eee;">
<tr >
<td class="t">车辆归属地：</td>
<td class="t"></td>
<td class="t">所属税务机构：</td>
<td class="t"></td>
<td class="t">车牌号前缀：</td>
<td class="t"></td>
</tr>
<tr>
<td class="t">验车情况：</td>
<td class="t">已验车</td>
<td class="t">验车人：</td>
<td class="t"></td>
<td class="t">争议解决方式：</td>
<td class="t">诉讼</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
        </tr>
<tr>
            <td style="height: 5px;" colspan="6"></td>
        </tr>
<tr class="checkboxedittable">
            <td class="top_td left_td">&nbsp;</td>
            <td class="top_td" align="center">北方第五代理点信息</td>
            <td class="top_td" align="center">张磊</td>
            <td class="top_td" align="center">第五代理店信息关联+异议处理方式</td>
            <td class="top_td" align="center">2013/05/02</td>
            <td class="top_td right_td" align="center">编辑</td>
        </tr>
        <tr>
            <td class="left_td bottom_td right_td" colspan="6">


<div class="editdiv">
<table width="100%">
<tr>
<td colspan="6">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销售信息</td>
</tr>
<tr>
<td colspan="6">
<table width="100%" style="background:#eee;">
<tr >
<td class="t">销售渠道：</td>
<td class="t"></td>
<td class="t">归属部门：</td>
<td class="t"></td>
<td class="t">业务来源：</td>
<td class="t"></td>
</tr>
<tr>
<td class="t">销售渠道：</td>
<td class="t"></td>
<td class="t">归属部门：</td>
<td class="t"></td>
<td class="t">业务来源：</td>
<td class="t"></td>
</tr>
<tr>
<td class="t">销售渠道：</td>
<td class="t"></td>
<td class="t">归属部门：</td>
<td class="t"></td>
<td class="t">业务来源：</td>
<td class="t"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="6">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;其他信息</td>
</tr>
<tr>
<td colspan="6">
<table width="100%" style="background:#eee;">
<tr >
<td class="t">车辆归属地：</td>
<td class="t"></td>
<td class="t">所属税务机构：</td>
<td class="t"></td>
<td class="t">车牌号前缀：</td>
<td class="t"></td>
</tr>
<tr>
<td class="t">验车情况：</td>
<td class="t">已验车</td>
<td class="t">验车人：</td>
<td class="t"></td>
<td class="t">争议解决方式：</td>
<td class="t">诉讼</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
        </tr>
</table>

</div>
</div>
</form>
</body>
</html>
清风段
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
折叠的table行元素bug
09-28
本文提到的“折叠的table行元素bug”就是一个典型的例子，主要涉及到了`position`属性对表格（table）布局的影响。通常，`position`属性用于定义元素的位置，包括`static`、`relative`、`absolute`和`fixed`等值。在...
javascript 实现table展开折叠
热门推荐
东语的专栏
10-24 2万+
本文是通过JavaScript实现table下的内容展开、折叠。
layui的数据表格展开
娓娓道来
12-25 6088
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum...
layui数据表格实现表格中嵌套表格，并且可以折叠展开
zongmaomx的博客
09-01 5371
1、最外层的表格先渲染，在done回调中向每个tr后面插入一个用来嵌套子级表格的tr。tr的class和table的id需要用索引 i 关联。3、最后监听箭头显示和隐藏对应的表格。2、插入完成后再渲染所有的子级表格。
Table折叠小技巧html-demo
weixin_33857230的博客
10-16 2036
1.要做一个table折叠的展示文本框直接上代码 html: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;table-折叠测试&lt;/title&gt; &lt;script type="text/javascript" src="http://libs.baidu.com/jquery/2.1
el-table全部展开与全部折叠功能，并监听收展动作
最新发布
qq_52140056的博客
12-01 1410
el-table全部展开与全部折叠功能，并监听收展动作
JQuery实现table行折叠效果以JSON做数据源
12-03
为了实现行折叠效果，我们需要写一个JQuery函数来处理点击事件。首先，我们可以为每一行添加一个点击事件监听器： ```javascript $(document).ready(function () { $('#myTable tbody tr').click(function () { /...
使用bootstrap写的关于table表格的显示和折叠效果
11-14
使用bootstrap，配合JQ写的关于table表格的显示和折叠效果。点击实现table表格的折叠后，显示+号，再次点击，伸展表格中的内容，并显示-号
我的Qt作品（4）实现可折叠和伸缩的自定义Widget--抽屉控件
$firecat利白的代码足迹$
09-02 9934
本篇介绍实现可折叠和伸缩的自定义Widget--抽屉控件。抽屉控件在紧凑的界面设计时，还是用途多多，好处多多。
Antd4 Table组件折叠收缩功能
Dandelion529_66的博客
09-16 2728
Antd4 Table组件折叠收缩功能
table行的折叠和展开
是一座岛
09-14 2万+
1.效果图 2.html <col style="width:100px;"> 编号 部门名称 老人姓名 基本费用 付费方式 折扣 总支付 入院时间 出院时间 退换金额 是否结算 123 部门名称 老人姓名 基本费用 付费方式 折扣 总支付 入院时间 出院时间 退换金额 是否结算 编号 入院时间 离院时间 在
html tr折叠,折叠的table行元素bug
weixin_39800331的博客
05-30 357
来一个例子:代码很简单,如下:复制代码代码如下:ddddssssss如此,一个表格,有两行两列,在任何浏览器下都没有任何显示错误.但是如果我加下面这句css,情况就不同了:复制代码代码如下:tr{position: relative;}看来是要出问题了,可是别着急,其实这个时候从表面上你看不到任何问题,页面布局绝对不会乱掉,你看不到任何东西会重叠起来.我可从来没有想过要耍大家,虽然表面上看不到问题...
html 表格折叠效果,JQuery实现table行折叠效果以JSON做数据源
weixin_39782709的博客
05-31 241
Array.prototype.filterRepeat = function () {var res = [], hash = {};for (var i = 0, elem; (elem = this[i]) != null; i++) {if (!hash[elem]) {res.push(elem);hash[elem] = true;}}return res;}$(function ()...
Html 中表格添加展开（折叠）按钮
Looking的博客
05-12 3490
简易代码： <html> <head> <meta http-equiv="Content-Typecontent="text/html; charset=UTF-8" /> <title>compatibility assessment</title> <script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"
表格展开和收缩，表格折叠
遨游大海
12-27 6425
具体效果如下： 具体实现代码如下：                     table {             border: solid 1px red;             border-collapse: collapse;         }         td {             font: normal 1
html折叠表格,CSS 表格
weixin_39673002的博客
05-31 470
HTML表用于在表格中布置表格数据。使用CSS，我们可以通过添加边框，控制表单元格文本对齐，高亮表行等样式HTML表。表格边框我们可以使用border属性为表，表行和表单元格添加边框。table,th,td{border:1pxsolidblack;}html>table,th,td{border:1pxsolidblack;}ValueItemCSSS...
实现一个可无限折叠的table
weixin_34272308的博客
11-11 457
前言 如何在table上实现一个可折叠展开子节点的table？先看下最终实现效果图： 其实这个项目在两个月以前就以上上传在github了，但当时没有写详细的实现过程。自己前几天发表的一篇技术贴当下拉列表数据过大时，该如何应对？得到大家的不少支持，犹如歌曲《红日》里的歌词像红日之火 点燃真的我~ 所以继续为掘金社区做奉献自己微不足道的力量啦 ~~ 在周末听着嗨歌写文还是很nice的~ 嗨...
el-table表单一键展开折叠，展开部分后一键全部展开或折叠
请叫我欧皇！的博客
06-28 5647
toggleRowExpansion：用于可展开表格与树形表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（第一个参数为 true 则展开）文章到此结束，希望对你有所帮助~使用递归的方式进行展开折叠操作。
el-table折叠行
10-07
以下是一个实现el-table折叠行的示例代码: ```html <el-table :data="tableData" style="width: 100%"> <el-table-column> !scope.row.isExpanded"> {{ scope.row.isExpanded ? '折叠' : '展开' }} ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值