Cannot get value from input text of Dynamically created Table

Question

Is that possible to get values from dynamically created table after a button click?

Here is my code for creating a table with an input field:

function tableInsert(row,col){
    var body = document.body,
    tbl  = document.createElement('table');
    tbl.style.width  = '100px';
    tbl.style.border = '1px solid black';
    tbl.id="draw_table";
    for(var i = 0; i < col; i++){
        var tr = tbl.insertRow();
        for(var j = 0; j < row; j++){
            var input1 = document.createElement("input");
            var td = tr.insertCell();
            td.appendChild(input1);
            td.style.border = '1px solid black';    
        }
    }
    body.appendChild(tbl);
    console.log(tbl.id);
}

Here is the button click function. It gets the value of the table which is dynamically created:

$("#calculate").click(function(){
    var table = document.getElementById('draw_table');
    for (var r = 0, n = table.rows.length; r < n; r++) {
        for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
            console.log(table.rows[r].cells[c].value);//value is undefined . is it right way to get the value
        }
    }
});

Answer 1

your code retrieve td element while you need value of input tag!

change your code to this:

$("#calculate").click(function(){
    var table = document.getElementById('draw_table');
    for (var r = 0, n = table.rows.length; r < n; r++) {
        for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
            console.log(table.rows[r].cells[c].children[0].value);
        }
    }
}