Вычислить значение в текстовом поле и отобразить результат в соответствующей метке

Question

У меня есть список текстовых полей с соответствующими ярлыками.Когда пользователь вводит число в текстовое поле, результат отображается в соответствующей метке на клавиатуре.Я могу сделать это один за другим, но я хотел бы пройтись по текстовым полям, чтобы показать результат в соответствующей метке, и я не уверен, как это сделать.

Это код:

 <div id="p">
    FOO
    <input type="text" id="nop" />
</div>

 <div id="e_table">
                <table>
                    <thead>
                        <th><h3>ABC</h3></th>
                        <th><h3>PQR</h3></th>
                        <th><h3>XYS</h3></th>
                    </thead>
                    <tbody>
                    <tr>
                        <td>Staff</td>
                        <td><input type="text" id="as" /></td>
                        <td><label id="las">label</label></td>
                    </tr>
                    <tr>
                        <td>Office</td>
                        <td><input type="text" id="bo"/></td>
                        <td><label id="lbo">label</label></td>
                    </tr>
                    <tr>
                        <td>Administrative</td>
                        <td><input type="text" id="mca" /></td>
                        <td><label id="lmca">label</label></td>
                    </tr>
                    </tbody>
                </table>
</div>

JQUERY:

$(function() {


         $("#as").keyup(function() {
        var nop = $("#nop").val();
        var val = $(this).val();
        var formula = parseInt(val/40/nop);
        $("#las").html(formula);
    });                                                             



});

Answer 1

Вы можете прикрепить событие keyup ко всем input:text элементам в таблице, а не к каждому по отдельности.Единственный запах - это способ выбора соответствующего элемента label.

$(function() {
    $("#e_table").delegate("input:text", "keyup", function() {
        var $input = $(this);
        var value = parseInt($input.val() / 40 / $("#nop").val());
        $input.closest("tr").find("label").html(value)
    });
});

Answer 2

Я бы предложил следующее:

// this is just to generate the 'for' attribute so that clicking the label focuses the field
$('td label').each(
    function(){
        $(this).attr('for',this.id.substring(1));
    });

$('input:text').keyup(
    function(){
        var val = $(this).val();
        if (!isNaN(val)){
            $('label[for="' + this.id + '"]')
                .text(val);
        }
    });

Демонстрация JS Fiddle .

Рекомендации:

• .attr().
• isNaN().
• .keyup().
• :textселектор входов .
• .val().

Answer 3

Добавьте класс ко всем соответствующим входам, см. Мой пример на http://jsfiddle.net/r3XGb/5/

Примечание:

• Я изменил ваш jQuery, чтобы сопоставить все входные данные с классом "calc" (поведение по одному).
• Событие keyup добавлено в #nop с циклическим перебором всех входных данных выше (я полагаю, что с помощью селектора классов это на самом деле ответ на ваш вопрос).
• Помещение всей логики в функцию.
• Вызов этой функции для document.ready (с предварительно заполненными входами).

Answer 4

Обновлен код

$('#e_table').find('tr input').keyup(function () {
  var $this   = $(this),
      $label  = $(this).closest('tr').find('label'),
      nop     = $("#nop").val(),
      val     = $(this).val(),
      formula = parseInt(val/40/nop);

  $label.html(formula);
});