Question

I have a list of textboxes with corresponding labels. When the user inputs a number in the textbox, the result is shown in its corresponding label on keyup. I can do this one by one but I would like to loop through the textboxes to show the result in the corresponding label and I’m not sure how to do that.

This is the code:

 <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

You can attach the keyup event to all input:text elements within the table rather than on each one individually. The only smell is how you select the corresponding label element.

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