如何在动态单元格中创建动态表

How to create a dynamic table in a dynamic cell?

本文关键字：动态 创建 单元格      更新时间：2023-09-26

我创建了一个包含 20 行和 2 列的动态表。 这是我的代码： 

    function createTblBtnClick() {
    var tbl = document.createElement("table");
    tbl.setAttribute("id", "myTable");
    tbl.setAttribute("dir", "rtl");
    tbl.cellPadding = 0;
    tbl.cellSpacing = 0;
    for (i = 0; i < rowNum; i++) {
        var row = tbl.insertRow(-1);
        for (j = 0; j < colNum; j++) {
            var cell = row.insertCell(-1);
            cell.setAttribute("id", "cell" + i.toString() + "-" + j.toString());
        }
    }
    document.getElementById("MyTablePanel").innerHTML = "";
    document.getElementById("MyTablePanel").appendChild(tbl);
    for (i = 0; i < rowNum; i++) {
        for (j = 0; j < colNum; j++) {
            var srt = "<a href='javascript:select(" + i.toString() + "," + j.toString() + ")' ><div id='div-" + i.toString() + "-" + j.toString() + "'>&nbsp;</div></a>";
            document.getElementById("cell" + i.toString() + "-" + j.toString()).innerHTML = srt;
        }
    }
}

现在我想在我的任何单元格中添加另一个表。 事实上，我想将我的每个单元格分成 2 个。我该怎么做？
我在下面的代码下进行测试，但它连续创建 4 列： 

function createTblBtnClick() {
    var tbl = document.createElement("table");
    var tb2 = document.createElement("table");
    tbl.setAttribute("id", "myTable");
    tbl.setAttribute("dir", "rtl");
    tbl.cellPadding = 0;
    tbl.cellSpacing = 0;
    tb2.setAttribute("id", "myTable1");
    //tbl.setAttribute("dir", "rtl");
    tb2.cellPadding = 0;
    tb2.cellSpacing = 0;
    var inner_tb = 0;
    for (i = 0; i < rowNum; i++) {
        var row = tbl.insertRow(-1);
        for (j = 0; j < colNum; j++) {
            var cell = row.insertCell(-1);
            cell.setAttribute("id", "cell" + i.toString() + "-" + j.toString());
        }
    }
    document.getElementById("MyTablePanel").innerHTML = "";
    document.getElementById("MyTablePanel").appendChild(tbl);
    ////////////////////////////////////////////////////////
    var row1 = tb2.insertRow(-1);
    for (inner_tb = 0; inner_tb < 2; inner_tb++) {
        var cell1 = row.insertCell(-1);
        cell.setAttribute("id", "in_cell " + inner_tb.toString());
    }
    document.getElementById("cell" + i.toString() + "-" + j.toString()).innerHTML = "";
    document.getElementById("cell" + i.toString() + "-" + j.toString()).appendChild(tb2);
    ///////////////////////////////////////////////////////////////
    for (i = 0; i < rowNum; i++) {
        for (j = 0; j < colNum; j++) {
            var srt = "<a href='javascript:select(" + i.toString() + "," + j.toString() + ")' ><div id='div-" + i.toString() + "-" + j.toString() + "'>&nbsp;</div></a>";
            document.getElementById("cell" + i.toString() + "-" + j.toString()).innerHTML = srt;
        }
    }
}

执行完全相同的逻辑，但将表附加到单元格引用。

var innerTbl = document.createElement("table");
//Populate the table...
//With the table populated, append it in the cell of the outertable.
cell.appendChild(innerTbl);

我认为这可能是您要做的：

http://jsfiddle.net/mPwpq/1/

function createTblBtnClick() {
    var rowNum = 20;
    var colNum = 2;
    var tbl = document.createElement("table");
    tbl.setAttribute("id", "myTable");
    tbl.setAttribute("dir", "rtl");
    tbl.cellPadding = 0;
    tbl.cellSpacing = 0;
    for (i = 0; i < rowNum; i++) {
        var row = tbl.insertRow(-1);
        for (j = 0; j < colNum; j++) {
            var cell = row.insertCell(-1);
            cell.setAttribute("id", "cell" + i.toString() + "-" + j.toString());
            // Add inner table with two columns
            var innerTbl = document.createElement("table");
            innerTbl.innerHTML = '<tr><td>A</td><td>B</td></tr>';
            cell.appendChild(innerTbl);
        }
    }
    document.getElementById("MyTablePanel").innerHTML = "";
    document.getElementById("MyTablePanel").appendChild(tbl);
}

只是一个建议。与其使用javascript来创建表，不如在HTML中创建表。使用 Document.getElementByID 在变量中获取该表。创建新的字符串变量，如"thisRow"，并在变量的字符串中添加HTML代码，如thisRow += "rowcellinner table"然后使用 .append(thisRow(;

您可以在循环的每个计数器中将值分配给 thisRow 变量，并将其追加到表中。我发现这更容易做到。

相关文章：