想知道WEB现在能不能做出如传统Office中Excel的那种合并单元格的方式
:选中要合并区域,右键弹出快捷菜单,按菜单上的合并单元格,然后就合并了。如果能,是通过什么事件触发了后台的函数。
后台的函数又是通过什么知道了要合并的单元格(即选中的单元格)是哪些?选中, 合并单元格

解决方案 »

  1.   


    <html>
    <head>
    <title>Test Merge</title>
    <style type="text/css">
    td {border: solid 1px black; background:gray; padding:5px; margin:10px; }
    </style>
    </head>
    <body><table>
    <tr>
    <td id="cell-1-1" onclick="merge(this);">a</td>
    <td id="cell-1-2" onclick="merge(this);">b</td>
    <td id="cell-1-3" onclick="merge(this);">c</td>
    <td id="cell-1-4" onclick="merge(this);">d</td>
    </tr>
    <tr>
    <td id="cell-2-1" onclick="merge(this);">e</td>
    <td id="cell-2-2" onclick="merge(this);">f</td>
    <td id="cell-2-3" onclick="merge(this);">g</td>
    <td id="cell-2-4" onclick="merge(this);">h</td>
    </tr>
    <tr>
    <td id="cell-3-1" onclick="merge(this);">i</td>
    <td id="cell-3-2" onclick="merge(this);">j</td>
    <td id="cell-3-3" onclick="merge(this);">k</td>
    <td id="cell-3-4" onclick="merge(this);">l</td>
    </tr>
    <tr>
    <td id="cell-4-1" onclick="merge(this);">m</td>
    <td id="cell-4-2" onclick="merge(this);">n</td>
    <td id="cell-4-3" onclick="merge(this);">o</td>
    <td id="cell-4-4" onclick="merge(this);">p</td>
    </tr>
    </table>
    <input type="button" id="merge" value="merge" onclick="mergeHighlighted();" />
    <script language="javascript" type="text/javascript">
        function merge(o) {
            o.style.backgroundColor = "red";        
        }    function mergeHighlighted() {
            var tds = document.getElementsByTagName("td");
            var firstCellId = "";
            var mergedCells = "";
            for (var i = 0; i < tds.length; i++) {
                if (tds[i].style.backgroundColor == "red") {
                    mergedCells += tds[i].textContent;
                    if (firstCellId == "") {
                        firstCellId = tds[i].id;
                    }
                    else {
                        tds[i].style.backgroundColor = "gray";
                        tds[i].style.display = "none";
                        tds[i].textContent = "";
                    }
                }
            }
            var firstCell = document.getElementById(firstCellId);
            firstCell.textContent = mergedCells;
            firstCell.style.backgroundColor = "gray";
        }
    </script>
    </body></html>
      

  2.   

    先明确概念
    面对数据(后台)
    首先后台不知道(也不需要知道)你前端在做什么方式的操作
    因为后台只要接受你提交的数据就可以了
    你什么事情也不做 就是提交一个  单元格合并的连接 也可以合并前端比较复杂
    数据模块
    也就是你的单元格的信息 这个要和后台的同步
    操作界面
    面向用户进行操作的UI
    后台【数据】《---》前端【数据】《----》前端【操作UI】你分析整理清楚了在做你这个东西