◆◆100分有点难度，各路高手来看看◆◆如果通过JS自由的拆分和合并Table的单元格，像Dreamweaver那样。

Question

百合心MM的代码：
<table border="1" width="100%" id=tab1 onmousedown=tabStart() onmouseup=tabEnd()>
  <tr>
    <td width="25%">111</td>
    <td width="25%">111</td>
    <td width="25%">　</td>
    <td width="25%">　</td>
  </tr>
  <tr>
    <td width="25%">222</td>
    <td width="25%">　</td>
    <td width="25%">　</td>
    <td width="25%">　</td>
  </tr>
  <tr>
    <td width="25%">　</td>
    <td width="25%">　</td>
    <td width="25%">　</td>
    <td width="25%">　</td>
  </tr>
</table>
<p>从第<input type="text" name="col1" size="4">列到第<input type="text" name="col2" size="4">列&nbsp;&nbsp;&nbsp;   
从第<input type="text" name="row1" size="4">行到第<input type="text" name="row2" size="4">行<input type="button" value="合并" onclick=doTab()></p>  
<script>  
function doTab(){  
x1=col1.value-1;  
x2=col2.value-1;  
y1=row1.value-1;  
y2=row2.value-1;  
if (x1==x2 && y1==y2) return;  
htmlstr="";  
xspan=0;
yspan=0;
for (i=x1;i<=x2;i++) xspan+=tab1.rows[y1].cells[i].colSpan;
for (i=y1;i<=y2;i++) yspan+=tab1.rows[i].cells[x1].rowSpan;

for (i=y1;i<=y2;i++) { 
htmlstr+="<br>"; 
 
for(j=x1;j<=x2;j++){  
htmlstr+=tab1.rows[i].cells[j].innerHTML;  

}
} 
htmlstr=htmlstr.substr(4); 
for (i=y1;i<=y2;i++){ 
j=x1; 
while (j<x2){ 
    tab1.rows[i].deleteCell(x1); 
    j++; 
} 
    tab1.rows[i].cells[x1].colSpan=xspan;
}
for (i=y2;i>y1;i--){
tab1.rows[i].deleteCell(x1);
}
tab1.rows[y1].cells[x1].rowSpan=yspan;
tab1.rows[y1].cells[x1].innerHTML=htmlstr; 
//alert(htmlstr);  
}  
function tabStart(){  
    obj=window.event.srcElement;  
    col1.value=obj.cellIndex+1;  
    col2.value=col1.value;  
    row1.value=obj.parentElement.rowIndex+1;  
    row2.value=row1.value;  
}  
function tabEnd(){  
    obj=window.event.srcElement;  
    col2.value=obj.cellIndex+1;  
    row2.value=obj.parentElement.rowIndex+1;  
}  
</script>

Answer 1

http://myjs.softhy.net/
各种JAVASCRIPT特效
LZ去看看

Answer 2

to yhlovezx: 
看了那个网站，里面的拆分是把单元格有限的拆分成固定的列，有没有自由拆分，动态判断修改colspan的呢？谢谢

Answer 3

现在的主要可以集中在两个方面
把一个TD拆分成N列时，要怎么获取和它同列的所有TD并把这些TD的colspan改变。
把一个TD拆分成N行时，要怎么获取和它同行的所有TD并把这些TD的rowspan改变。但实际上还有好多特殊情况需要考虑

Answer 4

通过　表格.rows[索引].cells[索引]　的形式可以定位任意一个单元格。对拆分前后的表格各自用一个二维数组表示：
　　当一个TD拆分成N列后，建立一个新的数组，如下：
r1c1 , r1c1 , r1c1
r1c1 , r1c2 , r0c0（原有内容r1c1合并后设为r0c0,标示不输出）
r1c2 , r0c0 , r1c1
　　根据数组内的值来输出新的内容，构成表格。

Answer 5

上面的图有点乱
用下面这个
是上次一个csdn网友提的问题，
一时找不到原贴子了
  <table border="1" width="100" height="100">
    <tr>
      <td colspan="2">&nbsp</td>
      <td rowspan="2">&nbsp</td>
    </tr>
    <tr>
      <td rowspan="2">&nbsp</td>
      <td>&nbsp</td>
    </tr>
    <tr>
      <td colspan="2">&nbsp</td>
    </tr>
  </table>

Answer 6

meizz(梅花雪) 果然是WEB版的绝对高手级人物，升级这么快，利害。。超过E章了。