js动态生成表格时 colspan的问题

最新推荐文章于 2024-06-25 09:39:17 发布

原创最新推荐文章于 2024-06-25 09:39:17 发布 · 7.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#dialog #chrome #c #浏览器 #ie #工具

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态生成表格并设置单元格跨列的方法，在不同浏览器中的表现及解决方案。通过调整colspan属性的设置方式，解决了在IE浏览器中单元格未能正确跨列的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天项目中要用到动态生成，设置一个 td 跨列colspan =4；我用js去设置：

var tb = document.getElementById("content");
var l = tb.rows.length;
var r = tb.insertRow(l);

var c1 = r.insertCell(0);
c1.className = "longload";
c1.setAttribute("align","center");
c1.setAttribute("colspan",4);
c1.innerHTML = "<img src='http://ossweb-img.qq.com/images/qtalk/room/member/loading.gif' width='25px' height='25px' /><p>加载中</p>";

这样在chrome，ff 都没有问题，但是当我做dialog 显示的时候问题来了。

这个td只能占一列的位置，怎么调整都不行。

后来用ie的开发人员工具一改里面的 colspan属性就好了。马上发现问题出在 colspan 这个属性。

后来直接改成：

var tb = document.getElementById("content");
var l = tb.rows.length;
var r = tb.insertRow(l);

var c1 = r.insertCell(0);
c1.className = "longload";
c1.setAttribute("align","center");
c1.colSpan = 4;
c1.innerHTML = "<img src='http://ossweb-img.qq.com/images/qtalk/room/member/loading.gif' width='25px' height='25px' /><p>加载中</p>";

这样所有的浏览器都好了。一个简单的属性 ie都支持不好。。。。。。。