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>

У меня есть событие onblure в поле ввода

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

Теперь я хочу получить оба значения полей ввода, если одно из них дает событие размытия. Добавьте эти значения и отправьте их в сумму 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.

ОБНОВЛЕНИЕ: Если все ваши структуры похожи на опубликованные, самый простой способ связать их друг с другом - использовать атрибут 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);
});

ОБНОВЛЕНИЕ СНОВА: Хорошо, поэтому у вас нет возможности назначать идентификаторы для ваших таблиц. Это нормально, мы все еще можем это сделать. Вам придется использовать функции обхода 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 );
        }