2016-02-19 2 views
-1

Может ли кто-нибудь помочь мне в том, как проходить через мою таблицу и суммировать значение количества * цены для каждой строки? Вот мой стол:Как перебирать значения таблиц и сумм jquery

<table id="template_item_table" class="table table-striped"> 
      <thead> 
       <tr> 
        <th>Product Code</th> 
        <th>Unit Price ($)</th> 
        <th>Quantity</th> 
        <th></th> 
        <th></th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>12345</td> 
        <td>50</td> 
        <td><input type="text" class="form-control quantity" name="quantity"></td> 
        <td><button class="btn btn-primary"><a href="/product/{{product_code}}">Item Details</a></button></td> 
        <td><button class="btn btn-danger">Remove Item</button></td> 
       </tr> 
       <tr> 
        <td>2222</td> 
        <td>53</td> 
        <td><input type="text" class="form-control quantity" name="quantity"></td> 
        <td><button class="btn btn-primary"><a href="/product/{{product_code}}">Item Details</a></button></td> 
        <td><button class="btn btn-danger">Remove Item</button></td> 
       </tr> 
      </tbody> 
     </table> 

Я получил, насколько:

$("#template_item_table tr").each(function() { 

     }); 

Но я не уверен, как поступить ...

ответ

0

Вы должны выбрать 2-й тд и умножить на величину входа в третий тд:

$("#template_item_table tbody tr").each(function() { 
    var value = $(this).find(" td:nth-child(2)").html(); 
    console.log(value); 

    var quantity = $(this).find(" td:nth-child(3) input").html(); 
    console.log(quantity); 

    var total = value * quantity; 
    console.log(total); 
}); 

Вы, вероятно, хотите, чтобы обернуть все это в об изменении связывания для ввода Фиэль ds, поэтому он запускается только при их изменении.

0

Не знаю, где вы ожидаете поставить эти ценности, но вам нужно найти входные значения 2, используя find() и умножить их вместе

$("#template_item_table tr").each(function() { 
    var price = +$(this).find('td').eq(1).text() || 0, 
     qty = +$(this).find('.quantity').val() || 0, 
     rowTotal = qty*price; 
}); 

Если вы хотели, чтобы они приложили к каждой строке можно добавить к выше

$(this).append('<td>' + rowTotal +'</td>') 

Если вы ищете только для великого общего

var total = 0; 
$("#template_item_table tr").each(function() { 
    var price = +$(this).find('td').eq(1).text()|| 0, 
     qty = +$(this).find('.quantity').val() || 0, 
     total += qty*price; 
}); 
alert(total); 
1
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    function solve() { 
     var iPrice = 0; 
     var iQuantity = 0; 
     var sum = 0; 
     $('#template_item_table tbody tr').each(function() { 
      iPrice  = parseInt($(this).find('td:eq(1)').text(), 10); 
      iQuantity = parseInt($(this).find('td:eq(2)').find('.quantity').val(), 10); 
      sum = sum + (iPrice * iQuantity); 
     }); 
     $('#sum').text("Sum=" + sum) 
    } 
    $('#solveButton').click(function() { 
     solve(); 
    }); 
}); 
</script> 
</head> 

<body style="width:50%;"> 
    <input type="button" value="Get Sum" id="solveButton" /> 
    <div id="sum" style="color:red;font-weight:bold;"></div> 
    <table id="template_item_table" class="table table-striped"> 
      <thead> 
       <tr> 
        <th>Product Code</th> 
        <th>Unit Price ($)</th> 
        <th>Quantity</th> 
        <th></th> 
        <th></th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td>12345</td> 
        <td>50</td> 
        <td><input type="text" class="form-control quantity" name="quantity"></td> 
        <td><button class="btn btn-primary"><a href="/product/{{product_code}}">Item Details</a></button></td> 
        <td><button class="btn btn-danger">Remove Item</button></td> 
       </tr> 
       <tr> 
        <td>2222</td> 
        <td>53</td> 
        <td><input type="text" class="form-control quantity" name="quantity"></td> 
        <td><button class="btn btn-primary"><a href="/product/{{product_code}}">Item Details</a></button></td> 
        <td><button class="btn btn-danger">Remove Item</button></td> 
       </tr> 
      </tbody> 
     </table> 
</body> 
</html> 
0

Попробуйте

<script> 
jQuery(document).ready(function($) 
{      
$('.form-control.quantity').change(function(){ 
ComputeTotal(); 
}); 

function ComputeTotal() 
{ 
var i=0; 
$("#template_item_table tr").each(function() { 

i=i+1; 
if(i>1){ 
var quantity1=$(this).find("td input:text").val(); 
var price1=$(this).find('td').eq(1).text(); 

sum = sum + (eval(price1) * eval(quantity1)); 
} 
}); 
alert(sum); 
} 
</script> 
Смежные вопросы