js实现点击任意两个单元格点击按钮进行合并

js实现点击任意两个单元格点击按钮进行合并

解决方案 »

  1.   

    ...
    js操作html的table,包括添加行，添加列，删除行，删除列 http://www.blogjava.net/caizh2009/articles/279953.htmlhttp://www.javaeye.com/topic/376563?page=4
      

  2.   

    先写个简单实现原型，还需要进一步完善L@_@K
    <!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>
        <title>dhtml.mergeCellsInTable.html</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="generator" content="editplus" />
        <meta name="author" content="[email protected]" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
    </head><body>
        <table id="testTbl" border="1">
            <tr>
                <td>Click me 1-1</td>
                <td>Click me 1-2</td>
                <td>Click me 1-3</td>
                <td>Click me 1-4</td>
            </tr>
            <tr>
                <td>Click me 2-1</td>
                <td>Click me 2-2</td>
                <td>Click me 2-3</td>
                <td>Click me 2-4</td>
            </tr>
            <tr>
                <td>Click me 3-1</td>
                <td>Click me 3-2</td>
                <td>Click me 3-3</td>
                <td>Click me 3-4</td>
            </tr>
        </table>
        <script type="text/javascript">
        <!--
    var table = document.getElementById("testTbl");
    table.firstSelectedCell = null;
    table.onclick = function() {
        if (this.firstSelectedCell == null)
        {
            this.firstSelectedCell = event.srcElement;
            this.firstSelectedCell.style.backgroundColor = "yellow";
        }
        else if (this.firstSelectedCell != null)
        {
            var secondSelectedCell = event.srcElement;        if (this.firstSelectedCell.cellIndex == secondSelectedCell.cellIndex)
            {
                this.firstSelectedCell.rowSpan += secondSelectedCell.rowSpan;
            }
            else if (this.firstSelectedCell.rowIndex == secondSelectedCell.rowIndex)
            {
                this.firstSelectedCell.colSpan += secondSelectedCell.colSpan;
            }        this.firstSelectedCell.innerHTML += secondSelectedCell.innerHTML;        this.firstSelectedCell.style.backgroundColor = "";
            this.firstSelectedCell = null;
            secondSelectedCell.parentNode.removeChild(secondSelectedCell);
        }
    };
        //-->
        </script>
    </body>
    </html>