请高手解答：如何用JS实现Table单元格的合并与拆分。

这样的拆分：http://www.51windows.net/hw/asp/jsview.asp?id=332用在线编辑器可以的http://www.fredck.com/FCKeditor/Demo/但也不能完全做到的

合并的，我前不久刚好写了一个，也许对你有用, 不过可能写的比较拙劣(我这个是合并值相同的那些相邻的行)：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><BODY><table id="theTable" border=1>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
<tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
<tr>
  <td>4</td>
  <td>5</td>
  <td>9</td>
</tr>
<tr>
  <td>10</td>
  <td>11</td>
  <td>12</td>
</tr>
<tr>
  <td>13</td>
  <td>14</td>
  <td>15</td>
</tr>
<tr>
  <td>13</td>
  <td>17</td>
  <td>18</td>
</tr>
<tr>
  <td>13</td>
  <td>8</td>
  <td>9</td>
</tr>
<tr>
  <td>7</td>
  <td>8</td>
  <td>9</td>
</tr>
</table><input type="button" value="合并第一列重复行" onclick="MergeCellsVertical(theTable, 0)">
<input type="button" value="合并第二列重复行" onclick="MergeCellsVertical(theTable, 1)">
<input type="button" value="合并第三列重复行" onclick="MergeCellsVertical(theTable, 2)"><script>
// 合并某一列相同的行
function MergeCellsVertical(tbl, cellIndex)
{
  if (tbl.rows.length < 2) return;
  var i, j;
  var last = tbl.rows(0).cells(cellIndex).innerHTML;
  var lastIndex = 0;
  for (i = 1; i < tbl.rows.length; i++)
  {
    if (tbl.rows(i).cells(cellIndex).innerHTML != last) // 发现新的值
    {
      if (i > lastIndex + 1)
      {
        for (j = lastIndex + 1; j < i; j++)
        {
          tbl.rows(j).cells(cellIndex).removeNode();
        }
        tbl.rows(lastIndex).cells(cellIndex).rowSpan = i - lastIndex;
      }
      last = tbl.rows(i).cells(cellIndex).innerHTML;
      lastIndex = i;
    }
  }
  // 最后一行要特别处理
  if (lastIndex != tbl.rows.length - 1)
  {
    for (j = lastIndex + 1; j < tbl.rows.length; j++)
    {
      tbl.rows(j).cells(cellIndex).removeNode();
    }
    tbl.rows(lastIndex).cells(cellIndex).rowSpan = tbl.rows.length - lastIndex + 1;
  }
}
</script></BODY>
</HTML>

百合心合并单元格的代码
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
<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">列   
从第<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>

To gjd111686(数字金刚) :上了那个站点。但没找到你说的例子。To 51windows(海娃)、 inelm(木野狐) :你们的例子都满足不了我的要求。
那个在线编辑器还可以，但操作不方便。而且没代码。另外在拆分单元格时有Bug.To awaysrain(绝对零度)：你提供的代码正是我梦寐以求的。在简单方正的表格中进行测试完全没有问题。
但遗憾的是，在存在复杂的colSpan及rowSpan的表格中进行测试。该算法无法完成跨行的合并。
在完成跨列的单元格合并后，也未对影响范围内的其它单元格的rowSpan进行处理，这导致多次合并操作后表格错乱。
我自己的算法与该算法存在差不多相同的问题。
请各位大虾再提供些参考。感激不尽啊！

http://expert.csdn.net/Expert/topic/2756/2756260.xml?temp=.6763574

要能处理colspan、rowspan的情况才算是比较好的啊

基本算法，用offsetWidth和offsetHeight

调试易

请高手解答：如何用JS实现Table单元格的合并与拆分。

解决方案 »