Question

我有一个带有相应标签的文本框列表。当用户在文本框中输入数字时，结果将显示在keyup上的相应标签中。我可以一个接一个地做这个，但我想循环文本框以在相应的标签中显示结果，我不知道该怎么做。

这是代码：

 <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

更新了代码

$('#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);
});

Answer 3

为所有相关输入添加一个类，请参阅http://jsfiddle.net/r3XGb/5/

上的示例

注意：

我改变了你的jQuery以匹配所有带有“calc”类的行为（行为逐一）。
keyup事件被添加到#nop，循环遍历上面的所有输入（使用类选择器，这实际上是你问题的答案，我猜）。
将所有逻辑放入函数中。
在document.ready上调用该函数（使用预先填充的输入）。

Answer 4

我建议如下：

// 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 demo

参考文献：

计算文本框中的值并在相应的标签中显示结果

4 个答案: