使用jQuery访问动态生成的表中的单元格 - Accessing cells in dynamically generated tables with jQuery

我有一个文件，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>以求和值的总和并在.totalPrice中显示总价？

这张桌子很有活力，这让我很恼火。

我试图在循环中编写一个循环，但无法访问正确的字段。

这应该做到：

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

$("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);
    });

为您的价格提供一个class属性，以便于检索值：

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