CODEWITHSUNDEEP
javascript
Saman
Saman

Reputation: 5563

How to create a dynamic table in a dynamic cell?

I created a dynamic table that contains 20 rows and 2 columns. this is my code: 

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

Now I want to add another table in any of my cells. In fact I want to divide each of my cells to 2. How can I do it?
I test below code but it creates 4 column in a row : 

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

Upvotes: 0

Views: 1241

Answers (3)

zigdawgydawg
zigdawgydawg

Reputation: 2046

I think this might be what you're trying to do:

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

Upvotes: 0

Roger Barreto
Roger Barreto

Reputation: 2284

Do exactly the same logic, but append the table to a cell reference.

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

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

Upvotes: 1

Sukhdeep Singh
Sukhdeep Singh

Reputation: 11

just a suggestion. Rather than using javascript for doing creating table, why not create the table in the HTML. Get that table in a var using Document.getElementByID. create new string variable like "thisRow" and add the HTML code in the string of the variable like thisRow += "rowcellinner table" and then use .append(thisRow);

you can assign the value to thisRow variable in each counter of the loop and append it to table. I find this easier to do.

Upvotes: 0

Related Questions