javascript - 根据类对表列的所有值求和并显示在文本框中

Question

这是我引用的教程:http://viralpatel.net/blogs/2009/07/sum-html-textbox-values-using-jquery-javascript.html

这是我的 javascript....

<script type="text/javascript">
      $(document).ready(function(){
        //iterate through each textboxes and add keyup
                //handler to trigger sum event
                $(".txt").each(function() {

                  $("#btn").click(function(){
                    calculateSum();
                    $("#sum").show();
                    });
                });

            });

            function calculateSum() {

               var sum = 0;
                //iterate through each textboxes and add the values
                $(".txt").each(function() {

                    //add only if the value is number
                    if(!isNaN(this.value) && this.value.length!=0) {
                        sum += parseFloat(this.value);
                    }

                });
                //.toFixed() method will roundoff the final sum to 2 decimal places
                $("#sum").html(sum.toFixed(2));
</script>

这是我显示总和值的 html 代码..

    <table width="1177" border="1" cellspacing="5" id="add" class="add">
      <tr>
        <td width="71" height="42"><button class="add">Add Rows</button></td>

        <td width="144"><div align="center"><strong>Product Name</strong></div></td>
        <td width="146"><div align="center"><strong>Brand Name</strong></div></td>
        <td width="146"><div align="center"><strong>Model No</strong></div></td>
        <td width="146"><div align="center"><strong>Dealer Price</strong> (DP)</div></td>
        <td width="146"><div align="center"><strong>Quantity (Q)</strong></div></td>
        <td width="146"><div align="center"> <strong>Total Price</strong> (TP)        </div>
          <div align="center">
            (TP = DP x Q)
</div>
        </td>
        <td width="153"><div align="center"><strong>Quality</strong></div></td> 
         <td><div align="center"><strong>Insert Image</strong></div></td>
      </tr>
      <tbody>
        <tr class="prototype">
          <td height="26"><button class="remove">Remove</button></td>
          <td><input type="text" name="product[]" id="product" /></td>
          <td><input type="text" name="brand[]" id="brand" /></td>
          <td><input type="text" name="model[]" id="model" /></td>
          <td><input type="text" name="dprice[]" class="price"/></td>
          <td><input type="text" name="quantity[]" class="quantity"/></td>
          <td><input name="txt[]" type="text" class="txt" /></td>
          <td><input type="text" name="quality[]" id="quality"/></td>
           <td><input name="images[]" type="file"/></td>
        </tr>
        <tr>
          <td height="26"><button class="remove">Remove</button></td>
          <td><input type="text" name="product[]" id="product" /></td>
          <td><input type="text" name="brand[]" id="brand" /></td>
          <td><input type="text" name="model[]" id="model" /></td>
          <td><input type="text" name="dprice[]" class="price"/></td>
          <td><input type="text" name="quantity[]" class="quantity"/></td>
          <td><input name="txt[]" type="text" class="txt" id="tp" /></td>
          <td><input type="text" name="quality[]" id="quality"/></td>
           <td><input name="images[]" type="file" id="image"/></td>
        </tr>
        <tr>
          <td height="26"><button class="remove">Remove</button></td>
          <td><input type="text" name="product[]" id="product" /></td>
          <td><input type="text" name="brand[]" id="brand" /></td>
          <td><input type="text" name="model[]" id="model" /></td>
          <td><input type="text" name="dprice[]" class="price"/></td>
          <td><input type="text" name="quantity[]" class="quantity"/></td>
          <td><input name="txt[]" type="text" class="txt" id="tp" /></td>
          <td><input type="text" name="quality[]" id="quality"/></td>
           <td><input name="images[]" type="file" id="image"/></td>
        </tr>
        <tr>
          <td height="26"><button class="remove">Remove</button></td>
          <td><input type="text" name="product[]" id="product" /></td>
          <td><input type="text" name="brand[]" id="brand" /></td>
          <td><input type="text" name="model[]" id="model" /></td>
          <td><input type="text" name="dprice[]" class="price"/></td>
          <td><input type="text" name="quantity[]" class="quantity"/></td>
          <td><input name="txt[]" type="text" class="txt" id="tp" /></td>
          <td><input type="text" name="quality[]" id="quality"/></td>
           <td><input name="images[]" type="file" id="image"/></td>
        </tr>
      </tbody>
    </table>
  </div>

<table width="1206" border="0">

  <tr>
    <td width="905">&nbsp;</td>
        <td width="86"><input name="btn" type="submit" id="btn" value="Grand Total" /></td>

    <td width="201"><input name="sum" type="text" id="sum"/></td>
</tr>

如何在点击按钮后在文本框中显示这个总和值。

请帮忙...

Answer 1

用 val() 方法试试这个我已经编辑了答案..

<script>
    $(document).ready(function () {
    //iterate through each textboxes and add keyup
    //handler to trigger sum event
    $(".txt").each(function () {

        $("#btn").click(function () {
            calculateSum();
            $("#sum").show();
           });
      });

   });

function calculateSum() {
    var sum = 0;
    //iterate through each textboxes and add the values
    $(".txt").each(function () {

        //add only if the value is number
        if (!isNaN(this.value) && this.value.length> 0) {
            sum += parseFloat(this.value);
        }

    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#sum").val(sum.toFixed(2));
}

</script>

这里是 Fiddle