Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Jquery

How Can I Merge Selected Table Cells Using Jquery

Post a Comment
How can I merge selected table cells using jquery? I have a dynamically created table and I need to merge the selected table cells horizontally and vertically.

Solution 1:

So far, from my knowledge, jquery has no function for manipulating tables. But cells can be merged by manually by coding. Here is a sample idea. Same thing can be done for merging rows. 

<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

Post a Comment for "How Can I Merge Selected Table Cells Using Jquery"

Menu Halaman Statis