如何在沒有輸入的情況下觸發事件

我想計算一個由多行組成的列的總和這些值是從數據庫中檢索出來的，也可以手動修改/ 問題是沒有輸入事件，函數是未觸發。所以當列顯示多行值時，總量不會顯示。提前任何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>

來源

2017-09-27 epiphany

您輸入監聽器裏把一切都變成一個獨立的功能，並首次調用它。 – 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>

來源

2017-09-27 09:28:40 mrid

您應該移動計算價格，以單獨的函數代碼並調用它的「domready中」和「輸入」事件。

來源

2017-09-27 09:25:05

創建一個獨立的功能，並調用它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(); 
    }); 
});

來源

2017-09-27 09:28:29

這可能有用

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

來源

2017-09-27 09:30:47

只需在事件計算值時進行更改。在你的代碼中，當輸入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(); 
    } 
});

希望它可以幫助你

來源

2017-09-27 09:34:43

如何在沒有輸入的情況下觸發事件

回答

相關問題