Question

嗨，我这里有点问题。我只想要对象中的所有数据的深层副本，并将其附加到基于某些条件的表中。我尝试了一些.clone（），但它不符合我的预期。所以这是我的jQuery代码：

$.post(self.baseUrl + "ReviewCountof", {CountNo: countno}, function(data) {
  var tableAll = $('#allCount tbody');
  var tableUc = $('#Uncounted tbody');
  var tableUm = $('#Unmatch tbody');
  var tableMatched = $('#Matched tbody');
  var count = data.length;
  tableAll.empty();
  tableUc.empty();
  tableUm.empty();
  tableMatched.empty();
  $.each(data, function(i, v) {
    var Desc = $('<td/>').append(v.Description);
    var expCount = $('<td/>').append(v.ExpectedCount);
    var total = $('<td/>').append(v.Total);
    var discrepancy = $('<td/>').append(v.Discrepancy);
    var cost = $('<td/>').append(v.Cost);
    var row = $('<tr/>').append(Desc).append(expCount).append(total).append(discrepancy).append(cost);

    if (v.Total == null || v.Total == '') {
      Uncounted++;
      tableUc.append(row);
    }
    if (parseFloat(v.ExpectedCount) !== parseFloat(v.Total)) {
      countUnmatched++;
      tableUm.append(row);
    } else {
      countMatched++;
      tableMatched.append(row);
    }

  });
}).success(function() {
  $('.LoadingData').hide();
});

我想在tableAll元素中附加所有数据。所以我认为如果我这样做会有效：

tableAll.append(row);

但它不起作用。

有没有办法用适当的代码实现这一目标？

Answer 1

致电时：

var row = $('<tr/>');
tableFoo.append(row); // row created on tableFoo
tableBar.append(row); // row moved from tableFoo to tableBar

你只是在移动row。这意味着row将在您调用.append(row)的最后一个位置结束。

您的代码的某些部分存在此问题。要修复它，不要附加最近创建的row，而是添加它的克隆，例如：

tableFoo.append(row.clone()); // row created on tableFoo
tableBar.append(row.clone()); // row created on tableBar

<强>演示：

＆＃13;

var Uncounted = 0;
var countUnmatched = 0;
var countMatched = 0;
$.getJSON("https://api.myjson.com/bins/1h1yxz", function(data) {
  var tableAll = $('#allCount tbody');
  var tableUc = $('#Uncounted tbody');
  var tableUm = $('#Unmatch tbody');
  var tableMatched = $('#Matched tbody');
  var count = data.length;
  tableAll.empty();
  tableUc.empty();
  tableUm.empty();
  tableMatched.empty();
  $.each(data, function(i, v) {
    var Desc = $('<td/>').append(v.Description);
    var expCount = $('<td/>').append(v.ExpectedCount);
    var total = $('<td/>').append(v.Total);
    var discrepancy = $('<td/>').append(v.Discrepancy);
    var cost = $('<td/>').append(v.Cost);
    var row = $('<tr/>').append(Desc).append(expCount).append(total).append(discrepancy).append(cost);

    if (v.Total == null || v.Total == '') {
      Uncounted++;
      tableUc.append(row.clone());
    }
    if (parseFloat(v.ExpectedCount) !== parseFloat(v.Total)) {
      countUnmatched++;
      tableUm.append(row.clone());
    } else {
      countMatched++;
      tableMatched.append(row.clone());
    }
    
    tableAll.append(row.clone());

  });
});

＆＃13;

table, tbody, tr, td { border: 1px solid black; border-collapse: collapse }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

allCount:
<table id="allCount">
    <tbody></tbody>
</table>
<br>
Uncounted:
<table id="Uncounted">
    <tbody></tbody>
</table>
<br>
Unmatch:
<table id="Unmatch">
    <tbody></tbody>
</table>
<br>
Matched:
<table id="Matched">
    <tbody></tbody>
</table>

＆＃13;

使用JQUERY复制多个表中的表行

1 个答案: