使用jQuery創建HTML表並追加

Question

我試圖根據用戶給定的大小創建表，但結果我將所有單元格都放在一行中。

我試過使用循環內循環。 一個創建trs，第二個創建tds

function createTable(size){
    for (var j=1; j<size+1; j++){
        $('table').append("<tr>");

        for (var i=1; i<size+1; i++){
            $('table').append('<td><input class="add"/></td>');

        }

        $('table').append("</tr>"); 
    }
}

我希望它創建多個行，而不僅僅是一行。 當我打開控制台日志時，所有內容都存儲在中。

Answer 1

問題是$(selector).append('<tr>')將創建一個新的DOMElement並添加它。 您沒有附加HTML。 您要附加DOM節點。 因此，您必須構造整個HTML並將其附加，或者創建節點，然后在附加它們之前/之后對其進行修改。

在這種情況下，簡單地生成HTML，然后附加它就很簡單了。

function createTable(size){
  var newRows = '';

  for (var j=1; j<size+1; j++){
    newRows += '<tr>';

    for (var i=1; i<size+1; i++){
      newRows += '<td><input class="add"/></td>';
    }

    newRows += "</tr>";
  }

  $('table').append(newRows);
}

Answer 2

確保將新的<td>單元格添加到表的<tr>元素中，而不是像當前那樣直接將<td>單元格添加到<table> 。

請考慮以下更改以解決您的問題：

1. 創建新的當前“行”元素作為外循環的第一步
2. 在您的內部循環中，將<td>元素附加到當前行
3. 將當前的“行”附加到表本身

可以用代碼表示為：

 function createTable(size) { for (var j = 1; j < size + 1; j++) { /* Create new row */ const row = $("<tr>"); for (var i = 1; i < size + 1; i++) { /* Append td cell to current row */ row.append('<td><input class="add"/></td>'); } /* Add newly created row to table */ $('table').append(row); } } createTable(10); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <table></table> 

Answer 3

如果將tr作為dom對象存儲在變量中，則可以將其附加到表中，然后附加到存儲的trdom對象中。

 $(document).ready(function() { function createTable(size){ for (var j=1; j<size+1; j++){ var tr = $("<tr>"); $('table').append(tr); for (var i=1; i<size+1; i++){ tr.append('<td><input class="add"/></td>'); } } } createTable(5); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table></table> 

附帶說明一下，如果將數組傳遞給函數，則可以控制tr和td的數量。

 $(document).ready(function() { function createTable(size){ for (var j=1; j<size[0]+1; j++){ var tr = $("<tr>"); $('table').append(tr); for (var i=1; i<size[1]+1; i++){ tr.append('<td><input class="add"/></td>'); } } } createTable([3,5]); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table></table>