jQuery 合并单元格

有没有做过利用jQuery或者是js实现的合并单元格。就是和excel似地。选中要合并的单元格。点击合并按钮实现合并效果。有的话麻烦奉上demo。。谢谢。
还有就是拖拽效果。（就是说拖拽一个div层放到table单元格内。并记录该层的id。能够存到数据库中。从数据库读取的时候还能够取得到。谢谢）能帮我实现。或者有类似demo的定会重谢。呵呵 --------------------编程问答-------------------- 有没有人来帮一下忙。谢谢了。 --------------------编程问答-------------------- 好久没做JQ 了顶下。。 --------------------编程问答-------------------- 说个思路吧。。
按钮的时候要判断列数
然后给某个表格加上 colspan=“”
然后移除这个表格之外的东西 --------------------编程问答-------------------- table.removeChild(table.rows[0]); --------------------编程问答-------------------- 等　级：
结帖率：0.00% --------------------编程问答-------------------- display="none"
用JS影藏你要合并的行试一下 --------------------编程问答--------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html;_charset=gb2312" />

<title>无标题文档</title>

</head>



<body>

<div id="ab">

<table width="200" border="1" cellspacing="0" id="tb1" align="left" style="border:  solid 1px;">

  <tr id="c">

    <td colspan=2 rowspan=3> </td>

    <td colspan=2 rowspan=2> </td>

    <td colspan=2 rowspan=2> </td>

    <td> </td>

 <td> </td>

  </tr>

  <tr id="b">

<td> </td><td> </td>

  </tr>

  <tr>



    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

</table></div>

行：<input id = "rows" value="2"/>   列：<input id = "cols" value="2"/>



<script>



  function document.onclick(){ 

  var a,b,c,d,rowNum,cellNum,cellNumP,tempCellNum1,tempCellNum2,maxCell,tempRows,y;

  var   e=window.event.srcElement;

maxCell = 0;   //最大列数

  rowNum=parseInt(document.getElementById("rows").value);    //要求合并的行数

  cellNum=parseInt(document.getElementById("cols").value);   //要求合并的列数

  if (rowNum==0||cellNum==0)

  {

 return;

  }

  cellNumP=0;   //用来保存鼠标点击的行所占列数

  if(e.tagName=="TD"){     

    a=e.parentElement.rowIndex;

 b=e.cellIndex;



//得到表格的最大列数

for (var i=0; i < e.parentElement.parentElement.rows[0].cells.length; i++) {

  maxCell = maxCell + parseInt(e.parentElement.parentElement.rows[0].cells[i].colSpan);

}



for (var i=0; i < e.parentElement.rowIndex; i++) {

 y=0;

 for (var j=0; j<e.parentElement.parentElement.rows[i].cells.length; j++)

 {

  if (e.parentElement.rowIndex-i>=parseInt(e.parentElement.parentElement.rows[i].cells[j].rowSpan))

  {

   y=y+parseInt(e.parentElement.parentElement.rows[i].cells[j].colSpan);

  }

  if (y<=b)

  {

   if (e.parentElement.rowIndex-i<parseInt(e.parentElement.parentElement.rows[i].cells[j].rowSpan))

   {

    cellNumP=cellNumP+parseInt(e.parentElement.parentElement.rows[i].cells[j].colSpan);

   }

  }

 }



}



for (var i=0; i<e.cellIndex; i++)

{

 cellNumP=cellNumP+parseInt(e.parentElement.parentElement.rows[e.parentElement.rowIndex].cells[i].colSpan);

}



if((e.parentElement.parentElement.rows.length-e.parentElement.rowIndex)<rowNum||(maxCell-cellNumP)<cellNum){

alert( "超出行数或者超出列数。" );

return;

}  



//将rowspan>1的进行 行 拆分

for (var i=e.parentElement.rowIndex; i < e.parentElement.parentElement.rows.length; i++) {

tempCellNum2=cellNum;

 for (var j=e.cellIndex; j < e.parentElement.parentElement.rows[i].cells.length; j++) {

 

  if (tempCellNum2>0)

  {

  tempCellNum2 = tempCellNum2 - parseInt(e.parentElement.parentElement.rows[i].cells[j].colSpan);

   if (parseInt(e.parentElement.parentElement.rows[i].cells[j].rowSpan)>1)

   {

   

    e.parentElement.parentElement.rows[i+1].cells[j].colSpan=e.parentElement.parentElement.rows[i].cells[j].colSpan;





     AddCol(e.parentElement.parentElement.rows[i+1]);



   }

   if (parseInt(e.parentElement.parentElement.rows[i].cells[j].rowSpan)>1)

   {

    e.parentElement.parentElement.rows[i+1].cells[j].rowSpan=parseInt(e.parentElement.parentElement.rows[i].cells[j].rowSpan)-1+"";

    e.parentElement.parentElement.rows[i].cells[j].rowSpan="1";

   }

  }



  

 }



}

//如果要合并的列等于表格的最大列数，则直接添加一空行，并删除合并行数一下的行

if (maxCell==cellNum)

{

 AddRow(e.parentElement.parentElement,e.parentElement.rowIndex+rowNum,cellNum);

 tempRows=e.parentElement.rowIndex

 for (i=tempRows+rowNum-1; i>=tempRows; i--)

 {

  e.parentElement.parentElement.parentElement.deleteRow(i);

 }

 return;

}

//将colspan>1的进行 列 拆分

for (var i=e.parentElement.rowIndex; i < e.parentElement.parentElement.rows.length; i++) {

tempCellNum1=cellNum;



 for (var j=e.cellIndex; j < e.parentElement.parentElement.rows[i].cells.length; j++) {



  if (parseInt(e.parentElement.parentElement.rows[i].cells[j].colSpan)>1)

  {

   for (c=parseInt(e.parentElement.parentElement.rows[i].cells[j].colSpan);c>1 ; c-- )

   {

    if (tempCellNum1>0)

    {

     e.parentElement.parentElement.rows[i].insertCell(j+1);

     e.parentElement.parentElement.rows[i].cells[j+1].innerHTML=" ";

    }

   }

   

  }





  tempCellNum1 = tempCellNum1 - 1;

  if (tempCellNum1>=0)

  {

   e.parentElement.parentElement.rows[i].cells[j].colSpan="1";

  }



 }



}

//合并

//删掉除了鼠标点击以外的单元格

for (var i=e.parentElement.rowIndex; i < e.parentElement.rowIndex+rowNum; i++) {



for (var j=e.cellIndex; j < e.cellIndex+cellNum; j++) {



 if(a==i&&b==j){

  //

 }

 else{

  if(e.cellIndex+1<e.parentElement.parentElement.rows[i].cells.length){

   e.parentElement.parentElement.rows[i].deleteCell(e.cellIndex+1);

  }

  

 }

}



}

//将鼠标点击的单元格的colspan和rowspan属性设置为要求合并的数

e.colSpan=cellNum+"";

e.rowSpan=rowNum+"";



}

}



function   AddCol(obj)   

{   

  var   col=document.createElement("td");   

  obj.appendChild(col);   

  col.innerHTML=" ";  

}



function   AddRow(obj,rowNum,cellNum)   

{   

  obj.insertRow(rowNum); 

  obj.rows[rowNum].insertCell(0);

  obj.rows[rowNum].cells[0].colSpan=cellNum+"";

  obj.rows[rowNum].cells[0].innerHTML=" ";  

}



function chk(num){ 

  return num?num%2?"奇数":"偶数":"0" 

}



</script>

</body>

</html>

--------------------编程问答-------------------- 输入几行几列,鼠标点击就各并几行几列 --------------------编程问答-------------------- (function($){
/**
    * desc : 合并指定表格（表格id为table_id）指定列（列数为table_colnum）的相同文本的相邻单元格
    * @table_id 表格id : 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data
    * @table_colnum   : 为需要合并单元格的所在列.参考jQuery中nth-child的参数.若为数字，从最左边第一列为1开始算起;"even" 表示偶数列;"odd" 表示奇数列; "3n+1" 表示的列数为1、4、7、......
    * @table_minrow ? : 可选的,表示要合并列的行数最小的列,省略表示从第0行开始 (闭区间)
    * @table_maxrow ? : 可选的,表示要合并列的行数最大的列,省略表示最大行列数为表格最后一行 (开区间)
    */
    $.tableSpan = $.tableSpan || {};
    $.extend($.tableSpan,{
     table_rowspan : function table_rowspan(table_id,table_colnum){
     if(table_colnum=="even"){
     table_colnum = "2n";
     }else if(table_colnum=="odd"){
     table_colnum = "2n+1";
     }else{
     table_colnum = ""+table_colnum;
     }
     var cols=[];
     var all_row_num = $(table_id+" tr td:nth-child(1)").length;
     var all_col_num = $(table_id+" tr:nth-child(1)").children().length;
     if(table_colnum.indexOf("n")==-1){
     cols[0] = table_colnum;
     }else{
     var n = 0;
     var a = table_colnum.substring(0,table_colnum.indexOf("n") );
     var b= table_colnum.substring(table_colnum.indexOf("n")+1);
     //alert("a="+a+"b="+(b==true));
     a = a?parseInt(a):1;
     b = b?parseInt(b):0;
     //alert(b);
     while(a*n+b<=all_col_num){
     cols[n] = a*n+b;
     n++;
     }
     }
     var table_minrow = arguments[2]?arguments[2]:0;
     var table_maxrow = arguments[3]?arguments[3]:all_row_num+1;
       var table_firsttd = "";
       var table_currenttd = "";
       var table_SpanNum = 0;
       for(var j=0;j<cols.length;j++){
       $(table_id + " tr td:nth-child(" + cols[j] + ")").slice(table_minrow,table_maxrow).each(function(i){
        var table_col_obj = $(this);
         if(i==0){
             table_firsttd = $(this);
             table_SpanNum = 1;
         }else{
             table_currenttd = $(this);
             if(table_firsttd.text()==table_currenttd.text()){
                 table_SpanNum++;
                 table_currenttd.hide(); //remove();
                 table_firsttd.attr("rowSpan",table_SpanNum);
             }else{
                 table_firsttd = $(this);
                 table_SpanNum = 1;
             }
         }
       });
    }
   },

    /**
    * desc : 合并指定表格（表格id为table_id）指定行（行数为table_rownum）的相同文本的相邻单元格
    * @table_id 表格id : 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data
    * @table_rownum   : 为需要合并单元格的所在行.参考jQuery中nth-child的参数.若为数字，从最左边第一列为1开始算起;"even" 表示偶数行;"odd" 表示奇数行; "3n+1" 表示的行数为1、4、7、......
    * @table_mincolnum ? : 可选的,表示要合并行中的最小列,省略表示从第0列开始(闭区间)
    * @table_maxcolnum ? : 可选的,表示要合并行中的最大列,省略表示表格的最大列数(开区间)
    */
   table_colspan : function table_colspan(table_id,table_rownum){
       //if(table_maxcolnum == void 0){table_maxcolnum=0;}
       var table_mincolnum = arguments[2]?arguments[2]:0;
       var table_maxcolnum;
       var table_firsttd = "";
       var table_currenttd = "";
       var table_SpanNum = 0;
       $(table_id + " tr:nth-child(" + table_rownum + ")").each(function(i){
           table_row_obj = $(this).children();
           table_maxcolnum = arguments[3]?arguments[3]:table_row_obj.length;
           table_row_obj.slice(table_mincolnum,table_maxcolnum).each(function(i){
               if(i==0){
                   table_firsttd = $(this);
                   table_SpanNum = 1;
               }else if((table_maxcolnum>0)&&(i>table_maxcolnum)){
                   return "";
               }else{
                   table_currenttd = $(this);
                   if(table_firsttd.text()==table_currenttd.text()){
                       table_SpanNum++;
                       if(table_currenttd.is(":visible")){
                        table_firsttd.width(parseInt(table_firsttd.width())+ parseInt(table_currenttd.width()));
                        }
                       table_currenttd.hide(); //remove();
                       table_firsttd.attr("colSpan",table_SpanNum);
                   }else{
                       table_firsttd = $(this);
                       table_SpanNum = 1;
                   }
               }
           });
       });
    }
});
})(jQuery); --------------------编程问答--------------------

补充：.NET技术 ,  ASP.NET