合并拆分单元格javascript 合并任意选中的单元格每个选中的单元格都会有相同的类名，单元格是动态生成的。

程序员文章站 2024-02-28 18:37:04
...

> <!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <link href="./css/bootstrap.min.css" rel="stylesheet"/>
    <title>设定页面 </title>
    <style>
        .float{
            width:40px;
            float:left;
        }
        .bj{
            background:#0094ff
        }
    </style>
</head>
<body>
    <header>
        <div class="row">
            <div class="col-lg-2">
                <input type="text" class="form-control float" placeholder="宽" id="width">
                <span class="float" style="line-height:30px; font-size:20px">X</span>
                <input type="text" class="form-control float" placeholder="高" id="height">
                <button class="btn btn-default" type="button" onclick="widthHeight()">确定</button>
            </div>
            <div class="col-lg-2">
                <input type="text" class="form-control float" placeholder="输入行" id="rows" style="width:100px">
                <input type="text" class="form-control float" placeholder="输入列" id="cols" style="width:100px">
                <button class="btn btn-default" type="button" onclick="creatTab()">确定</button>
            </div>
            <div class="col-lg-2">                
                <button class="btn btn-default" type="button" >合并单元格</button>
            </div>
        </div><!-- /.row -->
</header>
    <div id="tbody">

    </div>



    <script src="./js/jquery-3.1.1.min.js" type="text/javascript"></script>
    <script src="./js/bootstrap.min.js" type="text/javascript"></script>
    <script>
        function creatTab() {
            rows = document.getElementById('rows').value
            cols = document.getElementById('cols').value
            width = document.getElementById('width').value
            height = document.getElementById('height').value
            div1 = document.getElementById('tbody')
            // alert(rows+'\n'+cols)
            var tab = '<table border=1">'
            for (var i = 0; i < rows; i++) {
                tab += '<tr>'
                for (var j = 0; j < cols; j++) {
                    tab += `<td style=' width:${width}px;height:${height}px'  class="td">${i}${j}</td>`
                }
                tab += '</tr>'
            }
            tab += '</table>';

            div1.innerHTML = tab
            
        }
        function widthHeight() {
           width = document.getElementById('width').value
           height = document.getElementById('height')
            height.value = width*(9/16)

        }
        //添加类名的函数
        $(document).on("click", ".td", function () {
            console.log(this)
            $(this).is('.bj')?$(this).removeClass('bj'):$(this).addClass('bj') 	
        })
        //合并单元格

    </script>
</body>
</html>