Question

我需要帮助自动计数（不刷新）javascript / jquery函数让我按公式计算：

机会=总和（按人输入）*数字。

问题是，这是很多领域，约为100，但我需要分别计算每次“机会”。这是代码，需要理解的问题：

<table>
<tr>
    <th></th>
    <th>Name</th>
    <th>Number</th>
    <th>Chance</th>
    <th>Sum</th>
</tr>
<tr>
    <td><input type="checkbox" name="check[]" value="id1" /></td>
    <td>test1</td>
    <td>0.5</td>
    <td><span id="chance1" >NEED AUTO VALUE AFTER COUNTING HERE!</span></td>
    <td><input type="text" onkeyup="some function?" name="sum1" /></td>
</tr>

<tr>
    <td><input type="checkbox" name="check[]" value="id2" /></td>
    <td>test2</td>
    <td>0.7</td>
    <td><span id="chance2" >NEED AUTO VALUE AFTER COUNTING HERE!</span></td>
    <td><input type="text" onkeyup="some function?" name="sum2" /></td>
</tr>

<tr>
    <td><input type="checkbox" name="check[]" value="id3" /></td>
    <td>test3</td>
    <td>0.9</td>
    <td><span id="chance3" >NEED AUTO VALUE AFTER COUNTING HERE!</span></td>
    <td><input type="text" onkeyup="some function?" name="sum3" /></td>
</tr>
</table>

http://jsfiddle.net/5xch9/

Answer 1

使用jQuery，您可以执行以下操作（只需为输入添加选择器）：

function keyUpHandler(e){
  //whatever you want to do with the keyUp
  //e.target will contain the element
}
$('.inputKeyUp').on('keyup',keyUpHandler);

Answer 2

查看以下小提琴

http://jsfiddle.net/5xch9/4/

 $(document).ready(function () {

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

         $(this).keyup(function () {
             calculateSum();
         });
     });

 });

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

Answer 3

您可以使用parents方法查找相关tr输入的相关sum行，然后找到该行中的数字和机会单元格。

$('input[name^=sum]').on("keyup", function(){
    var $this = $(this);
    var $parent = $this.parents('tr');
    var $chance = $parent.find('.chance');
    var $number = $parent.find('.number');    
    $chance.text($number.text() * $this.val());
});

（缓存不同的节点（td / span标签）不是必需的，我这样写它是为了提高可读性）

您可以将标记修改为：

<tr>
    <td>test1</td>
    <td class="number">0.5</td>
    <td><span class="chance" id="chance1" >NEED AUTO VALUE AFTER COUNTING HERE!</span></td>
    <td><input type="text" name="sum1" /></td>
</tr>

（添加.number和.chance类可以更轻松地在行内找到所需的节点。

DEMO

使用JS / Jquery自动计算onkeyup上的值

3 个答案: