Question

我创建了一个包含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;
        }
    }
}

Answer 1

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

var innerTbl = document.createElement("table");
//Populate the table...

//With the table populated, append it in the cell of the outertable.
cell.appendChild(innerTbl);

Answer 2

只是一个建议。而不是使用javascript来创建表，为什么不在HTML中创建表。使用Document.getElementByID在var中获取该表。创建像“thisRow”这样的新字符串变量，并在变量的字符串中添加HTML代码 thisRow + =“rowcellinner table” 然后使用.append（thisRow）;

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

Answer 3

我认为这可能就是你要做的事情：

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

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

3 个答案: