首页 > 其他分享 >Table表格列收缩/展开

Table表格列收缩/展开

时间:2024-03-08 18:23:28浏览次数:20  
标签:表格 收缩 tr jsondata appendTo tablesorter table var Table

需要添加js引用:jquery.tablesorter.min.js

使用tablesorter排序,要給Table的class添加上tablesorter class=“tablesorter”

点击查看代码
function zDetail(jsondata) {
    $("#DetailsTable").empty();
    var _table = $("<table id='details' class='table table-hover table-bordered tablesorter' border=\"1\" cellspacing=\"0\"></table>");
    _table.appendTo($("#DetailsTable"));
    var _tr = $("<thead><tr><th>No.</th><th>年月</th><th>工号</th><th>姓名</th><th>干部</th>" +
     "<th>象限</th><th>出勤</th><th>检验数</th><th>检出数</th><th>检出率 <input type='button' value='+' id='showbtn' class='btn-info' /></th><th class='iup'>1760檢驗數</th><th class='iup'>1906檢驗數</th><th class='iup'>1910檢驗數</th><th class='iup'>8650檢驗數</th><th class='iup'>RMA覆判</th><th class='iup'>間接檢驗</th><th class='iup'>品位再現拍攝</th><th class='iup'>GP</th><th class='iup'>EMC</th><th>效率(%)</th>"+
     "<th>工作执行力(加分)</th><th>工作执行力(减分)</th><th>检出能力(加分)</th><th>检出能力(减分)</th>"+
     "<th max-width='200px'>狀況說明</th><th max-width='200px'>對策/措施</th><th>填寫人</th></tr></thead>");
    _tr.appendTo(_table);
	var _tbody = $("<tbody></tbody>");
	_tbody.appendTo(_table);
    for (var i = 0; i < jsondata.length; i++) 
	{
        var _tr = $("<tr></tr>");
        var exception = ""
		if ((jsondata[i].QTY > 1500) && (jsondata[i].NG_NUM == 0) || (jsondata[i].D_J < 0 ) )
		{ 
            _tr.css("background-color", "#ffbcb9"); // 修改背景颜色
		}
        _tr.appendTo(_table);
        var _td = $("<td>" + jsondata[i].RID +
                      "</td><td>" + jsondata[i].Y_M +
                      "</td><td>" + jsondata[i].EMP +
                      "</td><td>" + jsondata[i].ENAME +
                      "</td><td>" + jsondata[i].LEADERS +
                      "</td><td>" + jsondata[i].SUBREGION +
                      "</td><td>" + jsondata[i].DAYS +
                      "</td><td>" + jsondata[i].QTY +
                      "</td><td>" + jsondata[i].NG_NUM +
                        "</td><td>" + jsondata[i].RATE +
                        "</td><td class='iup'>" + "0" +
                        "</td><td class='iup'>" + "0" +
                        "</td><td class='iup'>" + "0" +
                        "</td><td class='iup'>" + "0" +
                        "</td><td class='iup'>" + "0" +
                        "</td><td class='iup'>" + "0" +
                        "</td><td class='iup'>" + "0" +
                        "</td><td class='iup'>" + "0" +
                        "</td><td class='iup'>" + "0" +
                      "</td><td>" + jsondata[i].EFF +
                      "</td><td>" + jsondata[i].J_Z +
                      "</td><td>" + jsondata[i].J_J +
                      "</td><td>" + jsondata[i].D_Z +
                      "</td><td>" + jsondata[i].D_J +
                      "</td><td style=\"text-align: left;\"><a href=\"#\" class=\"cmm\" data-placement=\"left\">" + jsondata[i].CMM + "</a>" +
                      "</td><td style=\"text-align: left;\"><a href=\"#\" class=\"act\" data-placement=\"left\">" + jsondata[i].ACT +"</a>"+
                      //"</td><td>" + jsondata[i].ACT_DATE + 
                      "</td><td>" + jsondata[i].FILLED_BY + "</td>");
        _td.appendTo(_tr);
    }
	
	$("#details").tablesorter(); //表格排序(点击表头)
	RegShowBtnToggler(); //列收缩/展开
};

//收缩/展开
function RegShowBtnToggler(){
	$("#showbtn").click(function () {
	   $(".iup").toggle("fast");
	   if($("#showbtn").val() == '+'){
		   $("#showbtn").val("-");
	   }else{
		   $("#showbtn").val("+");
	   }
	});
}

收缩状态下:

image

展开状态下:

image

标签:表格,收缩,tr,jsondata,appendTo,tablesorter,table,var,Table
From: https://www.cnblogs.com/qiuyublog/p/18060369

相关文章

  • CompletableFuture Demo
    CompletableFutureDemo题目:有一个数据库client,从数据库中取数据A和数据B,然后求和。请使用并发的知识,尽快的完成操作。/***{@code@author:}keboom*{@code@date:}2024/3/8*{@code@description:}*/publicclassDataBaseClient{@SneakyThrowspublic......
  • el-select内嵌在el-table中时,select下拉弹出框看不见的问题处理
    el-select内嵌在el-table中时,select下拉弹出框看不见的问题处理,项目中遇到用到el-select内嵌在表格的一个tdcell中,起先是下拉框会随着页面的滚动而位置移动,这是因为popper-append-to-body默认为true引起的,查阅之后,把它改为了false就可以了,可是这个时候发现,el-select点击展开,下......
  • VOL表格动态添加操作按钮及弹窗确认方法
    VOL表格动态添加操作按钮及弹窗确认方法有好多方法,感觉这种方法最好,效果如下图代码如下onInit()://操作按钮this.columns.push({title:'操作',hidden:false,align:"cent......
  • 很好用的把Table表格数据通过点击button导出成Excel
    HTML的button按钮点击查看代码<buttonid="btn_download"type="button"class="btnbtn-light"style="margin-left:10px;"onclick="btn_export()"><imgsrc="~/download.svg"alt=&quo......
  • TransmittableThreadLocal 的反复与纠缠
    TransmittableThreadLocal相信很多人用过,一个在多线程情况下共享线程上下文的利器名字好长,以下简称ttl本文以两年前一个真实项目开发遇到的问题,从源码的角度分析并解决环境itemversionjava8springboot2.2.2.RELEASEttl2.11.4代码如下,主线程并行启复......
  • WPS 两个表格数据列 比对是否存在
    两个表格数据列比对是否存在  当前表=IFERROR(VLOOKUP(B2,'[服务订单202306-202402.xlsx]Sheet1'!$A$1:$A$594500,1,FALSE),"不存在")跨表格比对是否存在,  B列数据不在A列中 结果输出D列比对后筛选D列 输入不存在就显示数据了   第二个两个表格数据更......
  • div contenteditable="true" 添加placehoder效果
    <divclass="contain":style="{height:editableHeight+'px'}" v-html="innerText" ref="editableDiv" contenteditable="true" :placeholder=placeholder @input="inputTe......
  • 解决表格修改格式后需要双击才能生效
    下载或复制值的Excel、WPS表格常会遇到,修改格式后不生效需要双击才会变化的情况。解决方法数据->分列->tab键->下一步->完成......
  • InheritableThreadLocal 使用举例
    ThreadLocalpublicclassMyThreadextendsThread{privateThreadLocal<String>threadLocal=newThreadLocal<>();publicvoidrun(){threadLocal.set("ThreadLocalvalueinMyThread");System.out.println(&quo......
  • Oracle中不允许表的列名称使用Oracle声明的关键字! (ORA-01747: user.table.column, t
    1.问题ORA-01747:user.table.column,table.column或列说明无效--Oracle下,根据商品价格从高到低取4-6名商品SELECT*FROM( SELECTROWNUM,t1.* FROM( SELECTprod_name,prod_price FROMPRODUCTS ORDERBYPROD_PRICEDESC )t1 WHEREROWNUM<=6......