Question

我想计算包含多行的列的总和从数据库中检索值，也可以手动更改/ 问题是没有输入事件，不会触发该功能。因此，当列显示多行值时，总量将不会显示。任何想法。谢谢提前

＆＃13;

$(document).ready(function(){

	
$("#myTable").on('input', '.txtCal', function () {
       var calculated_total_sum = 0;
     
       $("#myTable .txtCal").each(function () {
           var get_textbox_value = $(this).val();
           if ($.isNumeric(get_textbox_value)) {
              calculated_total_sum += parseFloat(get_textbox_value);
              }                  
            });
              $("#total_sum_value").html(calculated_total_sum);
       });
       
    

});

＆＃13;

<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<table id="myTable">
<tr>   <th width="100">Name </th>
    <th>Price</th>
</tr>
<tr>
    <td><span>A :</span></td>
    <td><input type="text" class='txtCal' value="10" /></td>
</tr>    
<tr>
    <td><span>B :</span></td>
    <td><input type="text" class='txtCal'  value="10"/></td>
</tr>  
<tr>
    <td><span>C :</span></td>
    <td><input type="text" class='txtCal' value="10" /></td>
</tr>  

<tr>
    <td><span><b>TOTAL  :</b></span></td>
    <td><b><span id="total_sum_value"></span></b></td>
</tr>
</table>

＆＃13;

Answer 1

您应该将计算价格的代码移动到单独的功能中，并在“domready”上调用它。和＆＃39;输入＆＃39;事件

Answer 2

＆＃13;

$(document).ready(function(){

	
$("#myTable").on('input', '.txtCal', function () {
       calculate();
});


function calculate() {
var calculated_total_sum = 0;
     
       $("#myTable .txtCal").each(function () {
           var get_textbox_value = $(this).val();
           if ($.isNumeric(get_textbox_value)) {
              calculated_total_sum += parseFloat(get_textbox_value);
              }                  
            });
              $("#total_sum_value").html(calculated_total_sum);
}
       
calculate();
    

});

＆＃13;

<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<table id="myTable">
<tr>   <th width="100">Name </th>
    <th>Price</th>
</tr>
<tr>
    <td><span>A :</span></td>
    <td><input type="text" class='txtCal' value="10" /></td>
</tr>    
<tr>
    <td><span>B :</span></td>
    <td><input type="text" class='txtCal'  value="10"/></td>
</tr>  
<tr>
    <td><span>C :</span></td>
    <td><input type="text" class='txtCal' value="10" /></td>
</tr>  

<tr>
    <td><span><b>TOTAL  :</b></span></td>
    <td><b><span id="total_sum_value"></span></b></td>
</tr>
</table>

＆＃13;

Answer 3

这可能有帮助

＆＃13;

$(document).ready(function(){
 var calculated_total_sum;
  calSum();
  
  
       
       
$("#myTable").on('input', '.txtCal', function () {
      
      calSum();
       
       });
       
    function calSum()
    {
      calculated_total_sum=0;
      $("#myTable .txtCal").each(function () {
           var get_textbox_value = $(this).val();
           if ($.isNumeric(get_textbox_value)) {
              calculated_total_sum += parseFloat(get_textbox_value);
              }                  
            });
              $("#total_sum_value").html(calculated_total_sum);
    }

});

＆＃13;

<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<table id="myTable">
<tr>   <th width="100">Name </th>
    <th>Price</th>
</tr>
<tr>
    <td><span>A :</span></td>
    <td><input type="text" class='txtCal' value="10" /></td>
</tr>    
<tr>
    <td><span>B :</span></td>
    <td><input type="text" class='txtCal'  value="10"/></td>
</tr>  
<tr>
    <td><span>C :</span></td>
    <td><input type="text" class='txtCal' value="10" /></td>
</tr>  

<tr>
    <td><span><b>TOTAL  :</b></span></td>
    <td><b><span id="total_sum_value"></span></b></td>
</tr>
</table>

＆＃13;

Answer 4

只需在事件计算值时更改。在您的代码中，您在输入txtCal类时触发了计算。你必须创建一个单独的函数：

function calculate() {
    var calculated_total_sum = 0;

    $("#myTable .txtCal").each(function () {
       var get_textbox_value = $(this).val();
       if ($.isNumeric(get_textbox_value)) {
          calculated_total_sum += parseFloat(get_textbox_value);
          }                  
        });
        $("#total_sum_value").html(calculated_total_sum);
   });
}

$(document).ready(function(){
    calculate();

    $("#myTable").on('input', '.txtCal', function () {
        calculate();
    }
});

希望它可以帮到你

Answer 5

创建一个单独的函数并在input上调用它，并在页面准备好数据库中的值时得到总和，在document.ready中调用它，如下所示：

function getSum()
{
    $("#myTable .txtCal").each(function () {
           var calculated_total_sum = 0;
           var get_textbox_value = $(this).val();
           if ($.isNumeric(get_textbox_value)) {
              calculated_total_sum += parseFloat(get_textbox_value);
              }                  
            });
              $("#total_sum_value").html(calculated_total_sum);
       });
}

$(document).ready(function(){
    getSum();

    $("#myTable").on('input', '.txtCal', function () {
        getSum();
    });
});

如何在没有输入的情况下触发事件

5 个答案: