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

これはあなたがやろうとしていることかもしれないと思います：

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 に答える