動的に生成されたテーブルの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に近いがあるでしょう）：私はjQueryの値の合計を合計するために使用して<td> Sにアクセスする方法

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

総額を.totalPriceに表示しますか？

ダイナミックなテーブルは私をここでイライラさせます。

ループ内にループを書き込もうとしましたが、正しいフィールドにアクセスできませんでした。

Answer 1

これはそれを行う必要があります。

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

はその後、すべてのテーブルのpriceの値を取得する：

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

は、あなたの価格に値の取得容易にするクラス属性を付与します。

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