如何动态合并html table的列？

<style>
td{background-color:red;vertical-align:top}
</style>
<body>
<table>
<tr><td>AAA</td><td>AAA</td><td>AAA</td><td>AAA</td></tr>
<tr><td>AAA</td><td>AAA</td><td>AAA</td><td>AAA</td></tr>
<tr><td>AAA</td><td>AAA</td><td>AAA</td><td>AAA</td></tr>
<tr><td>AAA</td><td>AAA</td><td>AAA</td><td>AAA</td></tr>
<tr><td>AAA</td><td>AAA</td><td>AAA</td><td>AAA</td></tr>
<tr><td>AAA</td><td>AAA</td><td>AAA</td><td>AAA</td></tr>
</body>
<script>
document.ondblclick=set;
function set()
{
   var trs=document.getElementsByTagName('tr');
   for(var i=2;i<trs.length;i++)
    {
       
       trs[i].childNodes[trs[i].childNodes.length-1].removeNode(true);
    }
    trs[1].childNodes[trs[1].childNodes.length-1].rowSpan=trs.length-1;
}
</script>

解决方案 »

  1.   

    <html>
    <head>
    <script language="JavaScript">
    <!--
    function tbMarge(){
    var tb=document.getElementById("tbTarget");
    var rowLen=tb.rows.length;
    var cellLen=tb.rows[0].cells.length;
    for(var i=2;i<rowLen;i++)
    tb.rows[i].removeChild(tb.rows[i].cells[cellLen-1])
    tb.rows[1].cells[cellLen-1].rowSpan =rowLen-1;
    window.event.srcElement.disabled=true;
    }
    //-->
    </script>
    </head>
    <body>
    <table id="tbTarget" cellpadding=0 cellspacing=0 border=1 width="400">
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    <input type="button" id="btnMarge" onclick="tbMarge()" value="Marge" title="合并">
    </body>
    </html>