jQuery benutzerdefinierte dynamische Tabelle

Question

Wie könnte ich eine dynamische Tabelle erstellen, wenn die Anzahl der Zeilen (Anzahl der <tr> Tags) und die Anzahl der Spalten (Anzahl der <td> Tags) vom Benutzer eingegeben werden?

Ich muss auch sicherstellen, dass jedes <td> Tag eine eindeutige ID hat.

HTML:

Ich habe ein <div id=tabel> ... </div> in meinem HTML-Code, wo ich diese dynamische Tabelle einfügen muß.

Javascript:

var rows = content.rows, colums = content.columns, size = colums * rows, i; 
$("tabel").append("<table>"); 

for (i = 0; i < size; i += 1) { 

// make table with dynamic <tr> and <td> 

} 

Pseudocode oder Code-Schnipsel, würde mir sehr helfen!

Answer 1

Sie benötigen eine verschachtelte For-Schleife. Loop die Reihen dann in jeder Zeile die Spalten Schleife:

https://jsfiddle.net/g80hzjgn/2/

var rows, cols, domRow, domCol, 
    table = $('#table'), 
    cellId = 0; 

jQuery('#submit').click(function(){ 
    table.empty(); 
    rows = parseInt($('#row-input').val()); 
    cols = parseInt($('#col-input').val()); 

    for(var i = 0; i < rows; i++){ 
    domRow = $('<tr/>'); 
    for(var x = 0; x < cols; x++){ 
     domCol = $('<td/>',{ 
     'id': "cell-" + cellId++, 
     'text': 'cell' 
     }); 
     domRow.append(domCol); 
    } 
    table.append(domRow); 
    } 
});