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>

我在输入字段上有一个onblure事件

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

现在我想获取输入字段的两个值，如果其中一个给出blur事件。添加这些值并将它们发布到sum div。有什么想法吗？

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

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

2 个答案: