Creación dinámica de tabla con la entrada de usuario

Actualmente estoy tratando de crear dinámicamente una tabla utilizando JS y HTML.Creación dinámica de tabla con la entrada de usuario

Pero en el momento en que parece que no puede recuperar los valores de entrada de usuario.

Lo que estoy haciendo mal?

¡Gracias de antemano!

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

Fuente

2011-11-18 methuselah

http://jsfiddle.net/z2WkM/ –

No ocurre nada – methuselah

I No recomendaría usar document.write. leer este

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

Prueba esto:

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

También puede utilizar el insertRow y insertCell.

Leer más:

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

Fuente

2011-11-18 18:48:15

En lugar de return en su función que necesita para pegar la tabla en el documento tratar de escribir algo como esto:

lugar:

return theader + tbody + tfooter;

escritura

document.write(theader + tbody + tfooter)

Fuente

2011-11-18 12:50:42 antyrat

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

Fuente

2013-06-20 18:16:40

-1

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

});

Fuente

2016-10-05 14:13:48

Mientras que este fragmento de código puede responder a la pregunta, no proporciona ningún contexto para explicar cómo o por qué. Considere agregar una o dos oraciones para explicar su respuesta. – brandonscript

Creación dinámica de tabla con la entrada de usuario

Respuesta

Cuestiones relacionadas