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

我將如何使用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); 
}) 

希望這有助於。

$('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>