表格的合并与删除----合并单元格

Question

其实就是操作DOM。下面的简单的例子：
<script>
function col()
{
if(event.srcElement.innerText=='删除整行')
{
document.all.mxh.childNodes(0).removeChild(event.srcElement.parentElement)
}
if(event.srcElement.innerText=='删除整列')
{
tmp=event.srcElement.cellIndex
for(var i=0;i<document.all.mxh.rows.length;i++)
if(document.all.mxh.rows(i).cells(tmp)) document.all.mxh.rows(i).removeChild(document.all.mxh.rows(i).cells(tmp))
}
if(event.srcElement.innerText=='合并单元格')
{
if((event.srcElement.cellIndex - 1) < 0 ) return
event.srcElement.parentElement.removeChild(event.srcElement.parentElement.cells(event.srcElement.cellIndex - 1))
event.srcElement.colSpan = "2"
}
}
</script>
<table id=mxh border="1" onclick="col()">
<tr>
<td>11</td><td>12</td><td>删除整列</td><td>删除整列</td><td>删除整行</td>
</tr>
<tr>
<td>21</td><td>22</td><td>23</td><td>24</td><td>删除整行</td>
</tr>
<tr>
<td>31</td><td>32</td><td>33</td><td>34</td><td>删除整行</td>
</tr>
<tr>
<td>31</td><td>32</td><td>33</td><td>34</td><td>合并单元格</td>
</tr>
</table>

Answer 1

参考
<table id="tbl" border="1" cellpadding="0" cellspacing="0">
<tr><td>hello</td><td>world</td><td>hello</td><td>world</td></tr>
<tr><td>hello</td><td><b>china</b></td><td>hello</td><td>china</td></tr>
</table>
<input type="button" value="merge 2nd row, 1,2,3 cells" onclick="merge(1,0,2)">
<input type="button" value="merge 1nd row, 1,2 cells" onclick="merge(0,0,1)">
<script language="javascript">
function merge(nRow, nColStart, nColEnd)
{
  var rows = tbl.rows;
  if (nRow < 0 || nRow >= rows.length)
return;  var cells = rows[nRow].cells;
  if (nColStart < 0 || nColStart >= cells.length || nColEnd < 0 || nColEnd >= cells.length ||
nColStart > nColEnd)
return;   var s= "";
   for (var i=nColStart; i <=nColEnd; i++)
s += cells[i].innerHTML + " ";   for (var i=nColStart; i <nColEnd; i++)
rows[nRow].deleteCell(nColStart);   rows[nRow].cells[nColStart].colSpan = nColEnd - nColStart + 1;
   rows[nRow].cells[nColStart].innerHTML = s;
}
</script>

Answer 2

我想实现任意2相邻的单元格合并（限行列，不包括对角的），我的想法是先能纵向选择相邻单元格内容，同时不能把横向选择单元格内容的功能去掉，不限方法但最好用ondrag事件拖动选择的内容

Answer 3

关于表格的合并与删除并不是一两句话就能解决的
如果不考虑表格的完整性，用seabell(百合心) 实现左右两单元格是没有问题的
但是如果选择的两单元格的行扩展数或者列扩展数不一致（即有可能是合并过的单元格）那段代码会出现很多问题
以下是实现选中一单元格向上合并的代码（由于该表格已被封装为HTC,element即为该表格），仅供参考
//得到上层单元格
function findupcell(){
//ClickTr为选择单元格所在行，ClickTd为当前选中的单元格，通过表格的
//onclick事件得到
  if (ClickTr.rowIndex>0){
            //上层单元格位置
   var findX = ClickTd.offsetLeft + 2;
   var findY = ClickTd.offsetTop-2;   for (var k=ClickTr.rowIndex-1; k >=0 ; k--){
   for (var j=0; j < element.rows(k).cells.length; j++){
var curcell = element.rows(k).cells(j);
if ((curcell.offsetLeft<findX)&&(curcell.offsetLeft+curcell.offsetWidth>findX)&&(curcell.offsetTop<findY)&&(curcell.offsetTop+curcell.offsetHeight>findY)){
return curcell
}
   }
     }
   }
   return 0;
}//向上合并
function upMerge()
{
  var cells = ClickTr.cells;  if (ClickTr.rowIndex>0){
  var upCell = findupcell()
  if (upCell!=0){
// alert(upCell.parentElement.rowIndex)
if (upCell.colSpan==ClickTd.colSpan){
   var s= ClickTd.innerText + " " + upCell.innerText;    upCell.rowSpan = upCell.rowSpan + ClickTd.rowSpan;
   upCell.innerHTML =  s;
   
            ClickTr.deleteCell(ClickTd.cellIndex);
       upCell.click();
}
}
  }
}