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

问题描述：

我想计算一个由多行组成的列的总和这些值是从数据库中检索出来的，也可以手动修改/ 问题是没有输入事件，函数是未触发。所以当列显示多行值时，总量不会显示。提前任何idea.Thanks如何在没有输入的情况下触发事件

$(document).ready(function(){ 
 

 
\t 
 
$("#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); 
 
     }); 
 
     
 
    
 

 
});

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

您输入监听器里把一切都变成一个独立的功能，并首次调用它。 – Walk

答

$(document).ready(function(){ 
 

 
\t 
 
$("#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(); 
 
    
 

 
});

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

答

您应该移动计算价格，以单独的函数代码并调用它的“domready中”和“输入”事件。

答

创建一个独立的功能，并调用它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(); 
    }); 
});

答

这可能有用

$(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); 
 
    } 
 

 
});

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

答

只需在事件计算值时进行更改。在你的代码中，当输入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(); 
    } 
});

希望它可以帮助你

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

相关推荐