通过javascript 合并单元格

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " Default.aspx.cs "  Inherits = " WebApplication2._Default "   %>

<! 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 runat = " server " >
     < title > 无标题页 </ title >
</ head >
< body >
     < form id = " form1 "  runat = " server " >
     < div >
                 < table border = " 1 "  width = " 100% "  id = " tabl "  onmousedown = " tabStart() "     >
                 < tr >
                     < td  >
                     </ td >
                 </ tr >
             </ table >
             < input type = " button "  value = " 提交 "  onclick = " insertrow() "  id = " Button1 "   />< br  />
             < asp:TextBox ID = " TextBox5 "  runat = " server "  Width = " 64px " > 3 </ asp:TextBox >
             < asp:Label ID = " Label2 "  runat = " server "  Text = " 行数 " ></ asp:Label >< br  />
             < asp:TextBox ID = " TextBox6 "  runat = " server "  Width = " 64px " > 5 </ asp:TextBox >
             < asp:Label ID = " Label1 "  runat = " server "  Text = " 列数 "  Width = " 51px " ></ asp:Label >& nbsp; < br  />
    
         < p >
从第 < asp:TextBox ID = " TextBox1 "  runat = " server "  Width = " 38px " ></ asp:TextBox > 行 < asp:TextBox
                ID = " TextBox2 "  runat = " server "  Width = " 38px " ></ asp:TextBox > 列  & nbsp; 到第 < asp:TextBox ID = " TextBox3 "
                    runat = " server "  Width = " 38px " ></ asp:TextBox > 行 < asp:TextBox ID = " TextBox4 "  runat = " server "
                        Width = " 38px " ></ asp:TextBox > 列  & nbsp;
             < input type = " button "  value = " 合并 "  onclick = " doTab() " >
             </ p >
         < p >
             & nbsp; </ p >
         < p >
             & nbsp; </ p >
         < p >
             & nbsp; </ p >
     </ div >
     </ form >
</ body >
</ html >


< script type = " text/javascript " >    

  function    tabStart()
 {       
      obj = window.event.srcElement;       
      document.getElementById( " TextBox2 " ).value = obj.cellIndex + 1 ;       
//       document.getElementById("TextBox4").value=document.getElementById("TextBox2").value;       
      document.getElementById( " TextBox1 " ).value = obj.parentElement.rowIndex + 1 ;       
//       document.getElementById("TextBox3").value=document.getElementById("TextBox1").value;       
  }       

function  doTab()
{   
   
    var  row1 = document.getElementById( " TextBox1 " ).value - 1 ;     // 起点行号  
    var  row2 = document.getElementById( " TextBox3 " ).value - 1 ;     // 终点行号  
    var  col1 = document.getElementById( " TextBox2 " ).value - 1 ;     // 起点列号
    var  col2 = document.getElementById( " TextBox4 " ).value - 1 ;     // 终点列号
    var  tab = document.getElementById( " tabl " );
 
     var  temp  =   0 ;
     if (col1  >  col2 ) // 找出最大的列号
    {
        temp  =  col1 ;
        col1  =  col2 ;
        col2  =  temp ;
    }
    
     if (row1  >  row2 ) // 找出最大的行号
    {
        temp  =  row1 ;
        row1  =  row2 ;
        row2  =  temp ;
    }
 
    
 
    if  (col1 == col2  &&  row1 == row2)  return ;   
   
    var  htmlstr = "" ;   
    var  xspan = 0 ; 
    var  yspan = 0 ; 
   
     for  ( var  i = col1;i <= col2;i ++ ) xspan += tab.rows[row1].cells[i].colSpan; 
     for  ( var  i = row1;i <= row2;i ++ ) yspan += tab.rows[i].cells[col1].rowSpan; 

//     for (var i=row1;i<=row2;i++) //连接所有单元格的内容
//     {  
//         htmlstr+="<br/>";  
//           
//         for(var j=col1;j<=col2;j++)
//         {   
//             htmlstr+=tab.rows[i].cells[j].innerHTML;
//         } 
//     }  
//     htmlstr=htmlstr.substr(5);

    htmlstr  =  tab.rows[row1].cells[col1].innerHTML;   
  
     for  ( var  i = row1;i <= row2;i ++ )
    {  
        j = col1;  
         while  (j < col2)
        {  
           tab.rows[i].deleteCell(col1);  
           j ++ ;  
        }  
            tab.rows[i].cells[col1].colSpan = xspan; 
    } 
     for  ( var  i = row2;i > row1;i -- )
    { 
        tab.rows[i].deleteCell(col1); 
    } 
        tab.rows[row1].cells[col1].rowSpan = yspan; 
        tab.rows[row1].cells[col1].innerHTML = htmlstr;  
//         alert(htmlstr);   
}  
      


  function    del()
  {   
    document.all.table1.deleteRow(window.event.srcElement.parentElement.parentElement.rowIndex);   
  }   
  
   function    insertrow()
  {   
    
   row  =  document.getElementById( " TextBox5 " ).value ;
   col  =   document.getElementById( " TextBox6 " ).value ;
   oTable = document.getElementById( " tabl " );
   oTable.innerText  =   "" ;
   
     for (  var  i = 0 ;i < row ;i  ++ )
    {
          oRow = oTable.insertRow()  ;
            for (  var  j = 0 ;j < col  ;j  ++ )
           {
                oCol = oRow.insertCell();
                oCol.innerHTML = " ( " + (i + 1 ) + (j + 1 ) + " ) " ;
//                 oCol.innerHTML="<input   type='text'   id=" + (i+1)*(j+1) + " Text=" + (i+1)*(j+1) + " />" ;  
           }
//           oRow.insertCell().innerHTML='<input   type="button"   value="删除此行"   οnclick="del()" />'     
    }
        
  }
  
</ script >