Dynamically creating table with user input

Question

I'm currently trying to dynamically create a table using JS and HTML.

But at the moment it cannot seem to retrieve the values from user entry.

What I am I doing wrong?

Thanks in advance!

<script type="text/javascript">
function createTable(num_rows, numcols)
{
    var num_rows = document.tablegen.rows.value;
    var num_cols = document.tablegen.cols.value;
    var theader = '<table>\n';
    var tbody = '';

    for( var i=0; i<num_rows;i++)
    {
        // create each row
        tbody += '<tr>';

    for( var j=0; j<num_cols;j++)
    {
        // create cell
        tbody += '<td>';
        tbody += 'Cell ' + i + ',' + j;
        tbody += '</td>'
    }

    // closing row table
    tbody += '</tr>\n';

    }

    var tfooter = '</table>';

    // TO DO

    return theader + tbody + tfooter;
}
</script>
</head>

<body>
<form name="tablegen">
<label>Rows: <input type="text" name="rows"/></label><br />
<label>Cols: <input type="text" name="cols"/></label><br/>
<input name="generate" type="button" value="Create Table!" onclick='createTable();'/>
</form>
<script type="text/javascript">
document.write(createTable());
</script>

score 10 · Accepted Answer · edited May 23 '17 at 12:16

I would not recommend to use document.write. read this

Why is document.write considered a "bad practice"?

Try this:

<script type="text/javascript">
function createTable()
{
    var num_rows = document.getElementById('rows').value;
    var num_cols = document.getElementById('cols').value;
    var theader = '<table border="1">\n';
    var tbody = '';

    for( var i=0; i<num_rows;i++)
    {
        tbody += '<tr>';
        for( var j=0; j<num_cols;j++)
        {
            tbody += '<td>';
            tbody += 'Cell ' + i + ',' + j;
            tbody += '</td>'
        }
        tbody += '</tr>\n';
    }
    var tfooter = '</table>';
    document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
}
</script>
</head>

<body>
<form name="tablegen">
<label>Rows: <input type="text" name="rows" id="rows"/></label><br />
<label>Cols: <input type="text" name="cols" id="cols"/></label><br/>
<input name="generate" type="button" value="Create Table!" onclick='createTable();'/>
</form>

<div id="wrapper"></div>

You can also use the insertRow and insertCell.

read more:

https://developer.mozilla.org/en/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces

http://www.w3schools.com/js/tryit.asp?filename=try_dom_table_insertrow

score 1 · Answer 2 · answered Nov 18 '11 at 12:50

1

Instead of return in your function you need to paste table to the document try to write something like this:

instead:

return theader + tbody + tfooter;

write

document.write(theader + tbody + tfooter)

answered Nov 18 '11 at 12:50

antyrat

26,266
9
69
74

score 0 · Answer 3 · edited Jun 20 '13 at 18:34

var fnPuzzel = {
max: 9,
min: 1,
rowControl: null,
colControl: null,
init: function (o) {
    if (o) {
        if ($('#' + o.rowControl))
            rowControl = $('#' + o.rowControl);
        if ($('#' + o.columnControl))
            colControl = $('#' + o.columnControl);
        $('#' + o.button).bind('click', fnPuzzel.createTable);
    }
},
createTable: function () {
    var rows = $(rowControl).val();
    var columns = $(colControl).val();
    var table = $('<table>');
    for (var rowCount = 0; rowCount < rows; rowCount++) {
        var tr = $('<tr>');
        for (var columnCount = 0; columnCount < columns; columnCount++) {
            $(tr).append($('<td>'));
        }
        $(table).append(tr);
    }
    $('.container').empty().append($(table).html()).find('td').bind('click', fnPuzzel.selectColumn);
    var delay = parseInt(Math.random() * 3000);
    setTimeout(fnPuzzel.selectRandom, delay);
},
selectColumn: function () {
    var cell = this;
    if (!$(cell).hasClass('selected'))
        $(cell).addClass('selected');

},
selectRandom: function () {
    var mx = $('.container td').not('.selected').length;
    var mn = 0;
    var randomCell = mn + Math.floor(Math.random() * (mx + 1 - mn));
    if (randomCell > 0)
        $('.container td').not('.selected').eq(randomCell).addClass('random');
}
}

score 0 · Answer 4 · answered Jun 28 '19 at 06:18

0

for( var i=0; i<num_rows;i++)
{
    tbody += '<tr>';
    for( var j=0; j<num_cols;j++)
    {
        tbody += '<td>';
        tbody += '<input type="text">';// to display or type content
        tbody += '</td>'
    }
    tbody += '</tr>\n';
}
var tfooter = '</table>';
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;

}

answered Jun 28 '19 at 06:18

keerthu sunil

1
1

2

What does this answer add, with regard to the original question, beyond the accepted answer? – hlg Jun 28 '19 at 06:27
The problem with the original code is that it doesn't allow you to enter input into the dynamic table. This solves that problem – keerthu sunil Jul 02 '19 at 12:13
User input as dynamic table cell content is not stated as a problem in the question. The question is about dynamic width and height of the table derived from user input. – hlg Jul 03 '19 at 05:53

score -1 · Answer 5 · edited Oct 06 '16 at 00:33

// first you need to import jquery library              
// detail is id of the table 

$(function(){

// add new row 
$('.add').click(function(){
  var tr = '<tr>'+
               '<td><input type="text" name="product[]" required class="form-control product" ></td>'+
               '<td><input type="text" name="quantity[]" required class="form-control quantity"></td>'+
               '<td><input type="text" name="product[]" required class="form-control product" ></td>'+
               '<td><input type="text" name="amount[]" required class="form-control amount"></td>'+
               '<td><input type="button"  class="btn btn-danger remove" value="-"></td>'+
          '</tr>';
  $('.details').append(tr);

});

While this code snippet may answer the question, it doesn't provide any context to explain how or why. Consider adding a sentence or two to explain your answer. — brandonscript, Oct 05 '16 at 18:50

Dynamically creating table with user input

5 Answers5

Linked