javascript - 使用 jQuery 访问动态生成的表格中的单元格

Question

我有一个文件，其中 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>

我如何访问<td>使用 jQuery 对值进行求和并在 .totalPrice 中显示总价？

动态的表格让我很恼火。

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

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