Question

如何使用jquery合并选定的表格单元格？我有一个动态创建的表，我需要水平和垂直合并选定的表格单元格。

<table cellpadding="0" cellspacing="1" id="our_table" class="jan">
   <tr id="dte">
     <th>head1</th>
     <th>head2</th>
     <th>head3</th>
     <th>head4</th>
   </tr>
   <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
   </tr>
   <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
   </tr>
   <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
   </tr>
</table>

Answer 1

到目前为止，据我所知，jquery没有操作表的功能。但是可以通过编码手动合并单元。这是一个示例。合并行也可以做同样的事情。

<html>
    <head>
        <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
        <script>
            $("document").ready(function () {
                $("table").delegate("td" , "click", function(){
                    var colSp = prompt("Number of cells to span");
                    $(this).attr("colspan", colSp);

                    var ptr = $(this).parent().children();
                    for (var i = 1; i < colSp; i++) {
                        ptr[ptr.length - i].parentNode.removeChild(ptr[ptr.length - i]);
                    }
                });
        });
        </script>
        <style>
            table td {
                border: 1px solid black;
                width: 50px;
                height: 50px;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <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>
    </body>
</html>r code here

如何使用jquery合并选定的表格单元格

1 个答案: