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');
                });
                });
            });
        }

UI：

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

Answer 1

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

第1部分：

第1步：动态创建table

第2步：将点击事件应用于每个td

第2部分：

合并每个td中具有highlited类的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>

Answer 2

 int num1 = 25599999;
 Console.WriteLine(RoundUp(num1, 6 /* This is the places (numbers from end that must be 0) */)) // Should return 30,000,000;

var StartTD = null;
    var StartIndex = null;
    var EndTD = null;
    var EndIndex = null;
    $().ready(function() {
        $("td").unbind("mousedown").bind("mousedown", function() {
            $("table td").css("background-color", "");
            StartTD = $(this);
            var y = $(this).index();
            var x = $(this).parent().index();
            StartIndex = {
                x: x,
                y: y
            };
        });
        $("td").unbind("mouseup").bind("mouseup", function() {
            EndTD = $(this);
            var y = $(this).index();
            var x = $(this).parent().index();
            EndIndex = {
                x: x,
                y: y
            };
            SelectTD(StartIndex, EndIndex, "green");
        });
        $("#btMerge").click(function() {
            MergeCell(StartIndex, EndIndex);
            MergeCell(EndIndex, StartIndex);
        });
    });

    function SelectTD(StartIndex, EndIndex, Color) {
        var MinX = null;
        var MaxX = null;
        var MinY = null;
        var MaxY = null;
        if (StartIndex.x < EndIndex.x) {
            MinX = StartIndex.x;
            MaxX = EndIndex.x;

        } else {
            MinX = EndIndex.x;
            MaxX = StartIndex.x;
        };
        if (StartIndex.y < EndIndex.y) {
            MinY = StartIndex.y;
            MaxY = EndIndex.y;
        } else {
            MinY = EndIndex.y;
            MaxY = StartIndex.y;
        };
        StartIndex = {
            x: MinX,
            y: MinY
        };
        EndIndex = {
            x: MaxX,
            y: MaxY
        };
        for (var i = MinX; i <= MaxX; i++) {
            for (var j = MinY; j <= MaxY; j++) {
                var SelectTR = $("table tr").eq(i);
                $("td", SelectTR).eq(j).css("background-color", Color);
            }
        }
    }

    function MergeCell(StartIndex, EndIndex) {
        var Colspan = null;
        var Rowspan = null;
        console.log(StartIndex, EndIndex)
        Rowspan = EndIndex.x - StartIndex.x + 1;
        Colspan = EndIndex.y - StartIndex.y + 1;
        var IndexTR = $("table tr").eq(StartIndex.x);
        $("td", IndexTR).eq(StartIndex.y).attr("colspan", Colspan).attr("rowspan", 
Rowspan);

        for (var i = StartIndex.x; i <= EndIndex.x; i++) {
            for (var j = StartIndex.y; j <= EndIndex.y; j++) {
                if (i == StartIndex.x && j == StartIndex.y) continue;
                var SelectTR = $("table tr").eq(i);
                $("td", SelectTR).eq(j).hide();
            }
        }

    }

table {
                width: 80%;
            }
            
            table td {
                border: 1px solid #97B4D1;
                text-align: center;
                cursor: pointer;
            }

使用jQuery合并动态创建的表的选定单元格

2 个答案: