동적으로 생성 된 테이블에서 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>들에 접근 할 방법

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

당신은 사람들이 당신이 잘못 한 일을 당신에게 설명 할 수 있도록 노력 무엇