將行附加到Javascript中的表格

我試圖用一些行填充表格一切正常，除非數組中的最後一行實際上是附加的。我真的不知道爲什麼。我已經打印了數組，一切都是如何。將行附加到Javascript中的表格

$table_body = $('#tbody'); 
$table_row = $('<tr><td style="text-align: center" class="nome"></td><td style="text-align: center" class="email"></td></td><td style="text-align: center" class="confirmado"></td></td><td style="text-align: center" class="dataCandidatura"></td><td class="btn" style="text-align: center"></td></tr>'); 

for (i in data) 
    { 
     var future_field = data[i]; 
     console.log(future_field); 

     $table_row.find('.nome').html(future_field.nome); 

     $table_row.find('.email').html(future_field.email); 

     $table_row.find('.confirmado').html(future_field.confirmed); 

     $table_row.find('.dataCandidatura').html(future_field.created_at); 

     // Appending table row to tbody 
     $table_body.append($table_row); 

     }

如果有人有一些線索，我將不勝感激。

來源

2017-04-11 user2963176

嘗試

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
table, td { 
 
    border: 1px solid black; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 

 
<p>Click the button to add a new row at the first position of the table and then add cells and content.</p> 
 

 
<table id="myTable"> 
 
    <tr> 
 
    <td>Row1 cell1</td> 
 
    <td>Row1 cell2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Row2 cell1</td> 
 
    <td>Row2 cell2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Row3 cell1</td> 
 
    <td>Row3 cell2</td> 
 
    </tr> 
 
</table> 
 
<br> 
 

 
<button onclick="myFunction()">Try it</button> 
 

 
<script> 
 
function myFunction() { 
 
    var table = document.getElementById("myTable"); 
 
    var row = table.insertRow(0); 
 
    var cell1 = row.insertCell(0); 
 
    var cell2 = row.insertCell(1); 
 
    cell1.innerHTML = "NEW CELL1"; 
 
    cell2.innerHTML = "NEW CELL2"; 
 
} 
 
</script> 
 

 
</body> 
 
</html>

來源

2017-04-11 19:08:48

感謝您的回答，我將使用@TypedSource答案，因爲它只是更換一條線，但無論如何感謝:) – user2963176

您可以通過使用.appendTo功能jQuery中添加celsl。

$table_body = $('#tbody'); 
 
$("#addCells").click(function(){ 
 
    row = $("<tr>").appendTo($table_body); 
 
    $("<td>").html("Content").appendTo(row).clone().appendTo(row); 
 
});

td { 
 
    text-align:center; 
 
    border:1px solid black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="addCells">Add Cells</button> 
 
<table> 
 
    <thead> 
 
    <tr> 
 
     <td>Header1</td> 
 
     <td>Header2</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody id="tbody"> 
 
    <tr> 
 
     <td>Initial</td> 
 
     <td>Initial</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2017-04-11 19:32:40 Neil

$table_body = $('#tbody'); 


for (i in data) { 
    $table_row = $('<tr><td style="text-align: center" class="nome"></td><td style="text-align: center" class="email"></td></td><td style="text-align: center" class="confirmado"></td></td><td style="text-align: center" class="dataCandidatura"></td><td class="btn" style="text-align: center"></td></tr>'); 
    var future_field = data[i]; 
    console.log(future_field); 

    $table_row.find('.nome').html(future_field.nome); 

    $table_row.find('.email').html(future_field.email); 

    $table_row.find('.confirmado').html(future_field.confirmed); 

    $table_row.find('.dataCandidatura').html(future_field.created_at); 

    // Appending table row to tbody 
    $table_body.append($table_row); 

} 
}

，你必須建立在每個迴路中的一個新的對象。對象通過引用被調用，而不是像字符串一樣被複制。

$table_body = $('#tbody'); 
$template = $('<tr><td style="text-align: center" class="nome"></td><td style="text-align: center" class="email"></td></td><td style="text-align: center" class="confirmado"></td></td><td style="text-align: center" class="dataCandidatura"></td><td class="btn" style="text-align: center"></td></tr>'); 

for (i in data) { 
    var $table_row = $template.clone(); 
    var future_field = data[i]; 
    console.log(future_field); 
    $table_row.find('.nome').html(future_field.nome); 
    $table_row.find('.email').html(future_field.email); 
    $table_row.find('.confirmado').html(future_field.confirmed); 
    $table_row.find('.dataCandidatura').html(future_field.created_at); 
    // Appending table row to tbody 
    $table_body.append($table_row); 
} 
}

或者您製作了jquery對象的副本。但保重，它將複製文本和綁定的聽衆不復制。

來源

2017-04-11 19:34:52 TypedSource

非常感謝。..我知道它必須是簡單的東西..非常感謝:) – user2963176

將行附加到Javascript中的表格

回答

相關問題