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>

如何使用jQuery访问<td>以总计值并在.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>

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

    });

Answer 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);
})

希望这有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: