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