Dynamisch Tabellenskelett mit numRows und numCols erstellen

Question

Ich habe einige Probleme mit ein paar for-Schleifen zum dynamischen Erstellen einer Tabelle mit JavaScript.

In diesem Beispiel numRows = 2 und numCols = 6.

Mein Code:

var table = $('<table></table>'); 
for (var i = 0; i < numRows; i ++) { 
    var row = $('<tr></tr>'); 
    for (var i = 0; i < numCols; i++) { 
     var rowData = $('<td></td>').text('test'); 
     row.append(rowData); 
    } 
    table.append(row); 
} 
console.log(table); 

Die Konsolenausgabe zeigt eine leere Tabelle. Es gibt keine Zeilen oder Zellen ... gerade dies:

Wie kann ich diese Logik zu beheben, so dass es richtig die Tabelle mit zwei Reihen von 6 Zellen je füllt? Deine Hilfe wird geschätzt!

Answer 1

Versuchen Sie, die Variable in der verschachtelten Schleife von i zu j zu ändern, und protokollieren Sie das HTML und nicht das jQuery-Objekt. (Außerdem sind die End-Tags nicht erforderlich.)

var table = $('<table>'); 
for (var i = 0; i < numRows; i ++) { 
    var row = $('<tr>'); 
    for (var j = 0; j < numCols; j++) { 
     var rowData = $('<td>').text('test'); 
     row.append(rowData); 
    } 
    table.append(row); 
} 
console.log(table.html()); 

Answer 2

für Script-Seite

var container = $('#my-container'), 
    table = $('<table>'); 
numRows= 3; 
numCols= 4; 
for (var x = 0; x < numRows; x ++) { 

    var tr = $('<tr>'); 
    for (var i = 0; i < numCols; i++) { 


    tr.append('<td>text</td>'); 

    } 

    table.append(tr); 


} 

container.append(table); 
console.log(table) 

html

<div id="my-container"></div> 

Arbeitsbeispiel

var container = $('#my-container'), 
 
    table = $('<table>'); 
 
numRows= 2; 
 
numCols= 4; 
 
for (var x = 0; x < numRows; x ++) { 
 
    
 
    var tr = $('<tr>'); 
 
    for (var i = 0; i < numCols; i++) { 
 

 
    
 
    tr.append('<td>text</td>'); 
 
    
 
    } 
 
    
 
    table.append(tr); 
 

 

 
} 
 

 
container.append(table); 
 
console.log(table)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="my-container"></div>

Answer 3

Sie müssen eine weitere Zählervariable für die Spaltenseite erstellen, anstatt die var i erneut zu verwenden. Hier

ist ein Beispiel Demo:

var row = 2, col = 6; 
 
var $table = $('<table/>'); 
 
$contents = []; // hold the generated rows 
 
for (var i = 0; i < row; i++) { // loop for rows 
 
    $tr = $('<tr/>'); 
 
    for (var j = 0; j < col; j++) { // loop for columns 
 
     // append a td with text [row][col] in tr 
 
     $tr.append($('<td/>', { text: '['+ (i+1) +'][' + (j+1) + ']' })); 
 
    } 
 
    $contents.push($tr); // push each generated row to contents 
 
} 
 
$table.append($contents); // append the contents to table 
 
$('body').append($table); // append table in body 
 
console.log($table.html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>