【求助】Javascript合并单元格效率过低，removeChild，

[danfer2000]

最近遇到一个问题，用javascript合并单元格时，要删除被合并的单元格，试了3中方法：
table.rows[i].cells[0].style.display="none";
table.rows[i].removeChild(table.rows[i].cells[0]);
table.rows[i].deleteCell(0);
这三种方法效率基本差不多，合并100个单元格，需要花7，8秒（测试过时间，主要是上面这行代码占用的时间，基本在6，7秒）
客户说慢，要求改进。

上网没搜到有效的办法，不知道各位大虾有没有什么高招，取代这行代码。

[jol_boy]

100个单元格？在我机器上很快！！！鼠标一点就合并起来了！我的机器配置：cpu是E7400的，2G内存。
估计还是得看客户端机器的配置情况，高端点的机器，对于这点程度的操作，小CASE，Q6600上速度更快。

[jol_boy]

试了一下，900个单元格在我机器上合并速度是1秒

[jol_boy]

我用的是deleteCell这种方式。计算出合并区域内那些行需要删除，起点终点各是多少，然后删除！不知道楼主用的什么方式！
还有，楼主是如何解决跨行合并问题的？且兼容IE和FF？
比如，页面已经有了合并单元格，现在又想选中一些格子合并时，如果合并区域拐到了其他合并单元格的部分，怎么去自动扩展合并区域！
能否做到像excel那样的智能扩展合并区域？

[danfer2000]

[Quote=引用 3 楼 jol_boy 的回复:]
我用的是deleteCell这种方式。计算出合并区域内那些行需要删除，起点终点各是多少，然后删除！不知道楼主用的什么方式！
还有，楼主是如何解决跨行合并问题的？且兼容IE和FF？
比如，页面已经有了合并单元格，现在又想选中一些格子合并时，如果合并区域拐到了其他合并单元格的部分，怎么去自动扩展合并区域！
能否做到像excel那样的智能扩展合并区域？
[/Quote]

我是需要给相同值的单元格合并，就是用循环。判断如果相同，则用removeChild给被合并的单元个删除，
我画面上的项目有个130个左右，就要花7，8秒时间啊。。。。不知道为什么

代码如下：我测试了红色部分的时间，8秒钟有7秒左右，是这行代码的时间，
问题是，单元格一个一个删，好像慢啊，不知道有没有一下删除多个单元格的方法，
也不知道和CSS的设置有没有关系
function chanageTable(){
var start = new Date();
var table;
var index=1;
table = document.getElementById("mainTable");
if(table != null){
var tdIndex = 0;
var hiddenValue = document.getElementById(getHiddenId("HIDDEN_Value",0)).value;
table.rows[tdIndex].cells[0].innerHTML=index;
var tempCell;
var rowspan;
var rowSize = 1;
for(var i = 1;i < table.rows.length;i++){
if(hiddenValue == document.getElementById(getHiddenId("HIDDEN_Value",i)).value){
// table.rows[i].cells[0].style.display="none";
table.rows[i].removeChild(table.rows[i].cells[0]);
// table.rows[i].deleteCell(0);
rowSize++;
}else{
if(rowSize>1){
tempCell = table.rows[tdIndex].cells[0];
tempCell.innerHTML=index;
tempCell.rowSpan = rowSize;
tempCell.vAlign="top";
}
rowSize = 1;
index++;
tdIndex = i;
hiddenValue = document.getElementById(getHiddenId("HIDDEN_Value",i)).value;
}

if(i == table.rows.length-1){
tempCell = table.rows[tdIndex].cells[0];
tempCell.innerHTML=index;
if(rowSize>1){
tempCell.rowSpan = rowSize;
tempCell.vAlign="top";
}
}
}
}
var end = new Date();
alert(start.getTime()-end.getTime());
}

[danfer2000]

我测了下，果然和CSS有些关系，在没有引用Css的情况下，确实是1秒以内，引Css以后，就要6秒，不知道表格的属性和删除单元格的速度有什么关系，

[danfer2000]

查明原因了！！但是还是无法解决，大虾们帮忙啊～～
CSS下面这个设置，就是每个TD都有样式的时候，速度就慢6，7倍，
给下面的设置删除后，速度是1秒左右，加上以后，就是7秒左右

TABLE.aa td
{
border: 1px solid #808080;
background-color: #C0FFFF; /*テーブルの中身*/
padding: 1px;
font-size: 12pt;
}

[luojihaidao]

关注！

[danfer2000]

我发现了，用
TD
{
border: 1px solid #808080;
background-color: #C0FFFF;
padding: 1px;
font-size: 12pt;
}
这种，直接定义TD的CSS的时候，就不影响速度，但是用class名下的td，就很慢，领导不让改CSS，不知道有没有办法，给td和这个Css的关联去掉

[danfer2000]

呵呵，感谢大家的帮忙，自己解决啦哈哈哈

在删除单元格的for循环外，用table.className="";，将表格关联的css类去掉，

删除单元格后，再用table.className="XXX";给重新赋值，速度快了～～

[gxynctz]

哥们，我用你的方法，速度没有变化呀。
不知道怎么回事。

[ghostyq37]

大哥。你绝对棒！！！

呵呵，感谢大家的帮忙，自己解决啦哈哈哈

在删除单元格的for循环外，用table.className="";，将表格关联的css类去掉，

删除单元格后，再用table.className="XXX";给重新赋值，速度快了～～


解决了我心中的疑问，小弟做的锁列 就是td上className="lock"

效率极其低下，现准备动态把td变成th，table样式上判断th锁住！

[e-mail]