jquery：获取并添加一些数据到表格结构

Question

这是我的表格结构。

<table> 
    <tr> 
     <td> 
     <input type="text"> 1 </input> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <input type="text"> 1 </input> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div class="sum"> </div> 
     </td> 
    </tr> 

我对输入字段

($("input[type=\"text\"]").blur(function()...) 

现在我想获得inputfields的两个值的onblure事件如果其中一人给出了模糊事件。添加这些值并将它们发布到总和格。任何想法？

Answer 1

您可能希望将一些class和/或id属性添加到您的输入中，以便该代码在放入更大的HTML上下文时可以很好地播放。然而，要回答这个问题给出：

$("input[type=text]").blur(function() { 
    var sum = 0; 
    $("input[type=text]").each(function() { // For each of the two inputs 
     sum += parseInt($(this).val())  // ... add its value to sum 
    }); 
    $("div.sum").text(sum);     // Update the div 
}); 

如果你带小数点的数字时，你可能会想使用parseFloat而非parseInt。

UPDATE：如果你的结构都是这样的一个贴，他们之间的相互关系。将含有表上使用id属性最简单的方法，和后代选择语法。然后代码是这样的：

$("input[type=text]").blur(function() { 
    var parentId = $(this).parents('table').attr('id'); 
    var sum = 0; 
    $(parentId +" input[type=text]").each(function() { 
     sum += parseInt($(this).val()) 
    }); 
    $(parentdId + " div.sum").text(sum); 
}); 

再次更新：好了，你没有办法ID指派给你的表。没关系，我们仍然可以做到这一点。你将不得不使用jQuery的遍历函数parent()和find()而不是简单的选择器，就这些。

$("input[type=text]").blur(function() { 
    var parent = $(this).parents('table'); 
    var sum = 0; 
    parent.find("input[type=text]").each(function() { 
     sum += parseInt($(this).val()) 
    }); 
    parent.find("div.sum").text(sum); 
}); 

Answer 2

$(document).ready (function() { 
      $("input[type='text']").blur(function() { 
       CalculateSum(); 
      }); 
     }); 

     function CalculateSum() 
     { 
      var sum = 0; 

      $("#tableID input[type='text']").each (function() {    
       if (!isNaN ($(this).val())) 
       { 
        sum += parseFloat ($(this).val()); 
       } 
      }); 

      $(".sum").text (sum); 
      // If you can give the div an id and fill the value. 
      //$("#sum").text (sum); 
     }