表格列输入的总和

时间:2014-03-07 04:50:34

标签: javascript

我有一张桌子如下:

       <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<table class="productList" width="600">
    <tr>
        <th colspan="9" align="left"> Select your product list</th>
    </tr>
    <tr class="head">
        <td width="25" align="right"></td>
        <td width="270" align="center">Product Name</td>
        <td width="80" align="center">Quantity</td>
        <td width="80" align="center">Unit Price</td>
        <td width="80" align="center">Line Total</td>
    </tr>
    <tr>
        <td align="center"><label class="arow" data-icon="&#x45;"></label></td>
        <td><select name="productname" class="datagridInput" disabled required>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select></td>
        <td><input name="quantity" type="text" class="datagridInput" ></td>
        <td><input name="purchase_price"type="text" class="datagridInput"></td>
        <td><input name="linetotal"  type="text" class="datagridInput" readonly></td>
    </tr>
    <tr>
        <td align="center"><label class="arow" data-icon="&#x45;"></label></td>
        <td><select name="productname" class="datagridInput" disabled required>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select></td>
        <td><input name="quantity" type="text" class="datagridInput" ></td>
        <td><input name="purchase_price"type="text" class="datagridInput"></td>
        <td><input name="linetotal"  type="text" class="datagridInput" readonly></td>
    </tr>
    <tr>
        <td align="center"><label class="arow" data-icon="&#x45;"></label></td>
        <td><select name="productname" class="datagridInput" disabled required>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select></td>
        <td><input name="quantity" type="text" class="datagridInput" ></td>
        <td><input name="purchase_price"type="text" class="datagridInput"></td>
        <td><input name="linetotal"  type="text" class="datagridInput" readonly></td>
    </tr>
    <tr>
        <td align="center"><label class="arow" data-icon="&#x45;"></label></td>
        <td><select name="productname" class="datagridInput" disabled required>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select></td>
        <td><input name="quantity" type="text" class="datagridInput" ></td>
        <td><input name="purchase_price"type="text" class="datagridInput"></td>
        <td><input name="linetotal"  type="text" class="datagridInput" readonly></td>
    </tr>
    <tr>
        <td align="center"><label class="arow" data-icon="&#x45;"></label></td>
        <td><select name="productname" class="datagridInput" disabled required>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select></td>
        <td><input name="quantity" type="text" class="datagridInput" ></td>
        <td><input name="purchase_price"type="text" class="datagridInput"></td>
        <td><input name="linetotal"  type="text" class="datagridInput" readonly></td>
    </tr>
</table>
<label for="net_ammount">Net Ammount:</label>
<input type="text" name="net_ammount" class="summary" disabled>
</body>
</html>

请帮我查找每个“行总计”列输入值的总和,并在“净额”输入元素中显示。实际上我发现它们的行和列索引值..........

数据来自服务器。当用户更改产品代码时,所有字段都启用,当用户选择产品总线值显示在“总线”列中时。请查看http://www.lpgbookkeeping.in/

用户名:blueflame2014 密码:Blueflame @ 2014

我希望用户在datagrid中选择产品代码。所有“行总额”的总和以净金额显示。

请有人帮助我........

以下是我的表格的jsfiddle demo

3 个答案:

答案 0 :(得分:0)

ID永远不会相同,Id是唯一的,HTML中的类可以是相同的(多个) 我错误地把它放在评论而不是答案框:))

答案 1 :(得分:0)

假设您输入“Net Amount”输入元素的id“summary_net_amount”,答案是这样的:

function calculateLineTotals(){
    var $linetotals = $("input[name=\"linetotal\"]");
    var sum = 0;
    $linetotals.each(function() {
        sum += parseInt($(this).val());
    });
    $("#summary_net_amount").val(sum);
}

答案 2 :(得分:0)

由于你没有任何关于linetotal输入的内容所以这可能会给NAN,但是这个方法你必须在按钮点击或任何其他更新文本框的事件上编写和调用它。

function getTotal() {
  var linetotal =0;    
  var line = document.forms[0].elements["linetotal"];

  for (var i = 0, len = line.length; i < len; i++) {  
       linetotal = linetotal  + parseInt(line[i].value) ;
  }
 document.getElementById("summary").value  = linetotal;
}