使用 jQuery 访问动态生成的表格中的单元格答案

【问题标题】：Accessing cells in dynamically generated tables with jQuery使用 jQuery 访问动态生成的表格中的单元格
【发布时间】：2016-07-24 14:05:56
【问题描述】：

我有一个文件，其中 php 动态生成一堆表，每个表也有动态生成的行数。

<?php foreach($trees as $tree): ?>
<div class="tree">
  <table>
    <thead>
      <tr>
        <th>Fruit</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <?php foreach($tree as $fruit => $fruitPrice) ?>
      <tr>
        <td><?php echo $fruit; ?></td>
        <td><?php echo $fruitPrice; ?></td>
      </tr>
      <?php endforeach; ?>
      <tr>
        <td>Total:</td>
        <td class="totalPrice"></td>
      </tr>
    </tbody>
  <table>
</div>
<?php endforeach; ?>

结果表看起来像这样（但这些表将接近 100 个）：

<div class="tree">
  <table>
    <thead>
      <tr>
        <th>Fruit</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Apple</td>
        <td>$1.99</td>
      </tr>
      <tr>
        <td>Banana</td>
        <td>$1.29</td>
      </tr>
      <tr>
        <td>Peach</td>
        <td>$2.25</td>
      </tr>
      <tr>
        <td>Total:</td>
        <td class="totalPrice"></td>
      </tr>
    </tbody>
  <table>
</div>

我如何使用 jQuery 访问 <td>s 来汇总值并在 .totalPrice 中显示总价？

动态的表格让我很恼火。

我尝试在循环中编写循环，但无法让它访问正确的字段。

【问题讨论】：

展示你的尝试，以便人们向你解释你做错了什么。

标签： javascript php jquery

【解决方案1】：

应该这样做：

<?php foreach($trees as $tree): ?>
<div class="tree">
  <table>
    <thead>
      <tr>
        <th>Fruit</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <?php foreach($tree as $fruit => $fruitPrice) ?>
      <tr>
        <td><?php echo $fruit; ?></td>
        <td id="fruitPrice"><?php echo $fruitPrice; ?></td>
      </tr>
      <?php endforeach; ?>
      <tr>
        <td>Total:</td>
        <td class="totalPrice"></td>
      </tr>
    </tbody>
  <table>
</div>
<?php endforeach; ?>
<script>
var totalPrice = null;
$("#fruitPrice").each(function()
{
  totalPrice += $(this).text();
  $(".totalPrice").text(totalPrice);
});
</script>

【讨论】：

【解决方案2】：

$("table").each(function () {
        var totalSum = 0;
        //find all tr in current table
        var $dataRow = $(this).find('tbody tr');

        $dataRow.each(function () {
            $(this).find('td:nth-child(2)').each(function (i) {
                // remove currency symbol  
                totalSum += parseFloat($(this).text().replace("$", ""));
            });
        });

        var totalFixedValue = parseFloat(totalSum).toFixed(2);

        //find totalPrice td and update with result
        $(this).find(".totalPrice").html(totalFixedValue);

    });

【讨论】：

【解决方案3】：

给你的价格一个类属性，以便于检索值：

<tr>
    <td><?php echo $fruit; ?></td>
    <td class="price"><?php echo $fruitPrice; ?></td>
</tr>

然后获取每个表的price的值：

$('table').each(function(){
    var total = 0;
    $('.price',this).each(function(){
        total += parseFloat($(this).text().replace('$',''));
    })
    $('.totalPrice',this).text('$'+total);
})

希望这会有所帮助。

$('table').each(function(){
  var total = 0;
  $('.price',this).each(function(){
    total += parseFloat($(this).text().replace('$',''));
  })
  $('.totalPrice',this).text('$'+total);
})

table,table td{
  border: 1px solid;
}
.totalPrice{
  color: #FFF;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tree">
  <table>
    <thead>
      <tr>
        <th>Fruit</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Apple</td>
        <td class='price'>$1.99</td>
      </tr>
      <tr>
        <td>Banana</td>
        <td class='price'>$1.29</td>
      </tr>
      <tr>
        <td>Peach</td>
        <td class='price'>$2.25</td>
      </tr>
      <tr>
        <td>Total:</td>
        <td class="totalPrice"></td>
      </tr>
    </tbody>
  </table>
  <br>
  <table>
    <thead>
      <tr>
        <th>Fruit</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Peach</td>
        <td class='price'>$1</td>
      </tr>
      <tr>
        <td>Banana</td>
        <td class='price'>$3.9</td>
      </tr>
      <tr>
        <td>Total:</td>
        <td class="totalPrice"></td>
      </tr>
    </tbody>
  </table>
  <br>
  <table>
    <thead>
      <tr>
        <th>Fruit</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Banana</td>
        <td class='price'>$1.96</td>
      </tr>
      <tr>
        <td>Apple</td>
        <td class='price'>$6.25</td>
      </tr>
      <tr>
        <td>Total:</td>
        <td class="totalPrice"></td>
      </tr>
    </tbody>
  </table>
</div>

【讨论】：