Question

我正在尝试用一些行填充一个表，除了实际上只附加了数组中的最后一行之外，一切都很好。我真的不知道为什么。我已经打印过阵列，一切都应该是这样的。

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

        }

如果有人有一些线索我会很感激。

Answer 1

试试吧

＆＃13;

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

＆＃13;

Answer 2

您可以使用.appendTo函数在jQuery中添加celsl。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

$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对象的副本。但请注意，它将被复制为基于文本，并且不会复制绑定的侦听器。

在Javascript中将行附加到表中

3 个答案: