0

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

3 回答 3

1

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

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

//With the table populated, append it in the cell of the outertable.
cell.appendChild(innerTbl);
于 2013-08-26T22:16:52.163 回答
0

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

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

于 2013-08-26T22:14:32.717 回答
0

我认为这可能是你想要做的：

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);
}
于 2013-08-26T22:25:37.837 回答