文档章节

table的colspan非常大时的异常

chro008
 chro008
发布于 2017/10/10 14:50
字数 787
阅读 46
收藏 0

工作中遇到一个情景需要设置td的colspan是可变值,根据定制列的多少来设置; 大致如下图(见谅画的丑) 输入图片说明

因为table行列太多,导致页面很卡(dom节点太多),但是实际情况中,tbody中的定制列只是一个展示作用,并没有实际内容(这里不考虑重新设计,实时上,应该把固定列和可定制列分开) 针对于这种情况,我将tbody中的可定制列用一个td来实现,设置其rowspan和colspan是其替代位置的行列数,并设置该td的样式背景图和以前的td相同即可达到与之前rowscols个td相同的效果,但是这里只用一个td来替换的,所以dom节点有质的减少。(工作情景最变态大概有上万行上千列,即用1个td替换了百万个td)

简单测试没问题上测试线,发现客户定制的列大于1000时候会出现问题 如下图(这是我写的一个table的demo,后面有该demo的代码) 输入图片说明

1,是thead,设置了1100个td 2,是出现问题的地方 3,是设置colspan,rowspan的td 设置了colspan为1100

发现colspan设置大于1000的地方未生效(找遍百度和stackoverflow 没有找到,可能设置这么大colspan的情景几乎没有吧?)

同理测试rowspan没有发现有最大值的限制

demo的代码如下

<html>
<thead>
<style>

.table td{
min-width:50px;
background-color:yellow;
}
</style>
</thead>
<table id="table1" class="table">

</table>

<table id="table2" class="table">

</table>

<script>

var tab = document.querySelector("#table1");
var content = "<tr>";
for(var i=0;i<2200;i++) {
content += "<td>" + (i+1) + "</td>";
}
content += "</tr><tr><td colspan='1100'>code</td></tr>";

tab.innerHTML = content;

tab = document.querySelector("#table2");
var content = "<tr><td>1</td><td rowspan='10000'>rowspan</td></tr>";
for(var i=1;i<10000;i++) {
content += "<tr><td>" + (i+1) + "</td></tr>";
}

tab.innerHTML = content;
</script>
</html>

没有办法,只能在这个td上考虑,既然1个td最大只能设置横跨1000列,那么我用多个不就是几千甚至上万列了吗?

最终代码如下

function completeConfigColBody() {
    //Main_Tab: document.getElementById("table1");
    var colNum = Main_Tab.rows[0].cells.length,    //总共的列数
        rowNum = Main_Tab.rows.length;    //总共的行数

    $(".other_data_zone").remove();  

    var rowspan = rowNum - 1;
    var colspan = colNum - 6;        //前六列是固定列

    if ($(".data_zone").size() === 0) {
        var tdobj = Main_Tab.rows[3].insertCell(6);
        $(tdobj).addClass("data_zone");
    }

    /*td 的colspan 最大值是1000  设置高于1000也只有1000的效果,
所以这里当colspan>1000的时候再增加几个td 如colspan=2300;
 那么就有2个other_data_zone 的td, 每个td的colspan=1000,
原始的data_zone colspan设置为300即可*/

    var original_data_zone = $(".data_zone");

    var data_zone_num = Math.ceil(colspan / 1000);

    for (var i = 1; i < data_zone_num; i++) {
        tdobj = Main_Tab.rows[3].insertCell(6+i);
        $(tdobj).addClass("data_zone").addClass("other_data_zone");
        $(tdobj).attr("rowspan",rowspan)
			.attr("colspan",1000);

        colspan -= 1000;
    }

    original_data_zone.attr("rowspan", rowspan)
        .attr("colspan", colspan);
}

页面效果图如下 输入图片说明

1,是项目中的tbody,设置了 3 的样式,即1个td的样式 2,是可定制列的tbody中的1个td 4,是如果td的colspan>1000的时候,辅助的td,具体逻辑在上方代码的注释中很清楚 (因为本地没办法定制大于1000列,所以我测试用的是100列,上方代码是1000)

© 著作权归作者所有

chro008

chro008

粉丝 5
博文 46
码字总数 19512
作品 0
海淀
程序员
私信 提问
phpQuery网页采集不全,只有部分采集到

phpQuery网页采集不全,只有部分采集到 通过firebug把网页代复制下来保存为一个本地网页的话,采集没有问题,所有内容都能采集到,但是在线采集的话只能部分采集,问题出在一个嵌套的表格,外...

leejava
2017/06/16
226
2
表格与嵌套表格 样式控制

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met......

柴高八斗之父
2016/01/28
45
0
如何在JSP中,实现下面表中记录按列的升序、降序?

序号 快递信息 运单号 存入/取出时间 滞留时间 操 作 =_= 没有查询到任何数据! "> 存入: 取出: " class="packageDetails">包裹详情 " class="packageDispose">包裹处理......

javame
2014/09/17
239
0
IE9下JSP转换为PDF求解

最近做一个项目,要求必须用IE9浏览器,JSP的内容大致有4000多行,比较复杂,里面的格式有表格、图片、汉字,汉字的大小和粗细是不一样的,请问各路大神有没有什么合适的解决方案(前端或者后...

death00
2016/12/22
184
2
xml模板的方式生成excel,如何嵌套多层for循环

代码结构很简单,就是resultList的实体对象中嵌套着一层dList.当前的写法会循环第一层结束后,才循环第二层.很难受. 如果实在没有办法,我就给dList拆出来直接存入resultList,但是这样做感觉好蠢...

javaxiaoz
2018/11/07
21
0

没有更多内容

加载失败,请刷新页面

加载更多

实战项目-学成在线(七)

上传图片功能实现 在此之前,必须先了解FastDFS分布式文件系统,可以看之前的文章 文件服务系统实现对文件的上传、删除、查询等功能,各子系统不再开发上传文件等请求,各子系统通过文件系统...

lianbang_W
37分钟前
3
0
JVM -- Java堆结构及对象分代

Hello,今天记录下 Java虚拟机中的其中一个重点知识 --> Java堆。 一起学习,一起进步。继续沉淀,慢慢强大。希望这文章对您有帮助。若有写的不好的地方,欢迎评论给建议哈! 初写博客不久,...

猫狗熊
43分钟前
4
0
elastic-job的使用

概述: 公司用了elastic-job来执行定时任务和管理定时任务,所以最近研究了一下写了个demo,由于我是把zookeeper部署在了docker上的,所以这里简单介绍下docke的基础命令。 1、Docker基础命令...

你个小机灵鬼
44分钟前
4
0
Cadence Allegro 中skill应用教程:让代码替我们打工

SKILL语言是Candence提供给用户的一个开发接口,利用其本身提供的接口函数和SKILL语言完成自动化操作的功能。 怎么查看SKILL: 1.可以直接用写字板打开进行编辑或看功能说明。 2.想自己写或改...

demyar
45分钟前
4
0
如何看待技术债务

关于技术债务,做开发的同学对如下场景应该不陌生: 为了敢项目进度,详细设计、单元测试等过程就不写了,以后补 需求变化万千,原本架构设计无法满足新的需求,可是又不想动架构,于是绕过架...

嘿嘿嘿IT
47分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部