javascript　动态拆分单元格

如何利用javascript实现动态拆分单元格？

解决方案 »

  1.   

    参考,创建新行
    myNewRow = document.all.myTable.insertRow()
      

  2.   

    也可以用oElement = document.createElement(sTag)
    或者innerHTML="<Td></Td>";
      

  3.   

    简单地做了个例子,当然需要很多判断条件来保证代码的健壮性
    lz自己完善吧<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>new page</title>
    <script>
    function aaa(){
    var i=parseInt(row.value)-1;
    var j=parseInt(col.value)-1;
    var number=num.value;
    table1.rows(i).removeChild(table1.rows(i).cells(j));
    for(var n=0;n<number;n++){
    table1.rows(i).insertCell(j);
    table1.rows(i).cells(j).innerText="拆分";
    }
    }
    function bbb(){
    var i=parseInt(row1.value)-1;
    var sj=parseInt(startCol.value)-1;
    var ej=parseInt(endCol.value)-1;
    for(var n=ej;n>=sj;n--){
    table1.rows(i).removeChild(table1.rows(i).cells(n));
    }
    table1.rows(i).insertCell(sj);
    table1.rows(i).cells(sj).innerText="合并";
    }
    </script>
    </head><body><table border="1" width="100%" id="table1">
    <tr>
    <td>第一　</td>
    <td>第二　</td>
    <td>第三　</td>
    <td>第四　</td>
    <td>第五　</td>
    </tr>
    </table>
    例子:将第一行第五列的单元格拆分成2个<br>
    row<input type=text id=row name=row value="1"><br>
    col<input type=text id=col name=col value="5"><br>
    num<input type=text id=num name=num value="2"><br>
    <input type=button value="拆分" onclick=aaa()><br>
    将第一行第五列----第六列的单元格进行合并<br>
    row<input type=text id=row1 name=row1 value="1"><br>
    startCol<input type=text id=startCol name=startCol value="5"><br>
    endCol<input type=text id=endCol name=endCol value="6"><br>
    <input type=button value="合并" onclick=bbb()>
    </body></html>
      

  4.   

    大哥，您这例子不叫拆分啊，就是属于动态给表格增加一列而已啊.您把table在加一行再运行您的例子就知道了，整个表格会一起增加一列的...
      

  5.   

    此回复为自动发出,仅用于显示而已，并无任何其他特殊作用
    楼主【chiyanlin】截止到2008-07-07 15:15:43的历史汇总数据(不包括此帖)：
    发帖的总数量:24                       发帖的总分数:370                      
    结贴的总数量:0                        结贴的总分数:0                        
    无满意结贴数:0                        无满意结贴分:0                        
    未结的帖子数:24                       未结的总分数:370                      
    结贴的百分比:0.00  %               结分的百分比:0.00  %                  
    无满意结贴率:---------------------无满意结分率:---------------------
    如何结贴请参考这里：http://topic.csdn.net/u/20080501/09/ef7ba1b3-6466-49f6-9d92-36fe6d471dd1.html
      

  6.   

    <html>
      <body>
       <div align="center">
          <table id="tb" border=1 cellspacing=0 cellpadding=0>
            <tr>
              <td>第一行第一列</td>
              <td>第一行第二列</td>
              <td>第一行第三列</td>
              <td>第一行第四列</td>
              <td>第一行第五列</td>
            </tr>
            <tr>
              <td>第二行第一列</td>
              <td>第二行第二列</td>
              <td>第二行第三列</td>
              <td>第二行第四列</td>
              <td>第二行第五列</td>
            </tr>
          </table>
          <input type="button" value="拆分" onClick="aaa()"/>
          <input type="button" value="合并" onClick="bbb()"/>
        </div>
      </body>
      <script language="javascript">
      <!--
        function aaa(){
         for(var i=0;i<tb.rows.length;i++){
     tb.rows(i).cells(4).colSpan = "2";
    }
    tb.rows(1).removeChild(tb.rows(1).cells(4));
    cell1 = tb.rows(1).insertCell();
    cell2 = tb.rows(1).insertCell();
    cell1.innerText = "aaa";
    cell2.innerText = "bbb";
        }
        function bbb(){
         for(var i=0;i<tb.rows.length;i++){
     tb.rows(i).cells(4).colSpan = "1";
    }
    tb.rows(1).removeChild(tb.rows(1).cells(5));
    tb.rows(1).removeChild(tb.rows(1).cells(4));
    cell1 = tb.rows(1).insertCell();
    cell1.innerText = "第二行第五列";
        }
      -->
      </script>
    </html>
    这样才是拆分和合并单元格