javascript - 使用jquery合并动态创建表的选定单元格

Question

我已经根据用户输入创建了一个动态表并使用 jquery 选择单元格。现在我想使用 jquery 合并选定的单元格。

谢谢，问候。

function CreateTable() {
            var rowCtr;
            var cellCtr;
            var rowCnt;
            var cellCnt;
            var myTableDiv = document.getElementById("myDynamicTable");
            var table = document.createElement('Table');
            table.border = '1';
            table.id = 'myTable';
            var tableBody = document.createElement('Tbody');
            table.appendChild(tableBody);
            rowCnt = document.getElementById('txtrows').value;
            cellCnt = document.getElementById('txtcols').value;
            for (var rowCtr = 0; rowCtr < rowCnt; rowCtr++) {
                var tr = document.createElement('tr');
                tableBody.appendChild(tr);
                for (var cellCtr = 0; cellCtr < cellCnt; cellCtr++) {
                    var td = document.createElement('td');
                    td.width = '120';
                    td.appendChild(document.createTextNode("Row:" + rowCtr + " Column:" + cellCtr));
                    tr.appendChild(td);
                }
            }
            myTableDiv.appendChild(table);
            $(document).ready(function () {
                $('#myTable td').click(function () {

                    var selected = $(this).hasClass('highlited');
                    $('#myTable tr').removeClass('highlited');

                    if (!selected)
                        $(this).addClass('highlited');
                });
                });
            });
        }

用户界面:

单击合并按钮时，应合并所选单元格。

Answer 1

您想在动态创建后突出显示TD。

第 1 部分:

• Step 1 : Create dynamically table
• Step 2 : Apply click event to each td

第 2 部分:

• Merge td who has highlited class in each tr;

请检查以下代码:

function CreateTable() {
    var rowCtr;
    var cellCtr;
    var rowCnt;
    var cellCnt;
    var myTableDiv = document.getElementById("myDynamicTable");
    var table = document.createElement('Table');
    table.border = '1';
    table.id = 'myTable';
    var tableBody = document.createElement('Tbody');
    table.appendChild(tableBody);
    rowCnt = document.getElementById('txtrows').value;
    cellCnt = document.getElementById('txtcols').value;
    for (var rowCtr = 0; rowCtr < rowCnt; rowCtr++) {
        var tr = document.createElement('tr');
        tableBody.appendChild(tr);
        for (var cellCtr = 0; cellCtr < cellCnt; cellCtr++) {
            var td = document.createElement('td');
            td.width = '120';
            td.appendChild(document.createTextNode("Click me, Row:" + rowCtr + " Column:" + cellCtr));
            tr.appendChild(td);
        }
    }
    myTableDiv.appendChild(table);

    $('#myTable td').each(function () {
        $(this).click(function () {
            var selected = $(this).hasClass('highlited');
            $('#myTable tr').removeClass('highlited');
            if (!selected) $(this).addClass('highlited');
        });
    });
};


function mergeCell() {
    $('#myTable tr').each(function (e) {
        var oldTDLength = $(this).find('td').length;

        for(xTD=0; xTD<oldTDLength;xTD++)
        {
            crrTD = $(this).find('td:eq(' + xTD + ')');
            crrTDNext = $(this).find('td:eq(' + xTD + ')').next();
            var colSpan = 1;
                    
            while (((crrTD.hasClass('highlited')) && (crrTD.hasClass('highlited') == crrTDNext.hasClass('highlited')))) {
                var tempCell = crrTDNext;///store old cell in temp
                crrTDNext = crrTDNext.next();///get next 
                tempCell.remove();///remove next highlited cell
                colSpan++;
                xTD++;//to skip merged cell
            }
            if (colSpan > 1) crrTD.attr('colSpan', colSpan);
        }//td loop
    });//tr loop
}

.highlited{background-color:#ffd800;color:#ff0000}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>Row Count</td>
        <td>Column Count</td>
        <td></td>
    </tr>
    <tr>
        <td><input type="text" id="txtrows" value="5" /></td>
        <td><input type="text" id="txtcols" value="5" /></td>
        <td><button onclick="CreateTable()">Create Table</button></td>
    </tr>
</table>



<div id="myDynamicTable"></div>

<button onclick="mergeCell()">Merge Highlight Cell</button>