Question

I have a table being drilled out with PHP in a recorders. I am using the table to update pricing. I have a text input and a form button. The button fires an Ajax call and updates the table. Right now I have the jQuery script inside the repeat region, but sometimes I have over 500 records.. Right now I use btn_2345 where 2345 is the unique I’d and the script fire on click btn_2345. How can I just use the script outside the repeat only once and get the values of the input text box and unique id.

Answer 1

If you have a table like this:

<table>
    <tr>
        <td><input type="text"></td>
        <td><button>go</button></td>
    </tr>
    <tr>
        <td><input type="text"></td>
        <td><button>go</button></td>
    </tr>
    <!-- ... -->
</table>

Then you could add a data-id attribute to the rows, walk up the DOM from your <button> to the <tr> to get the ID, then go back down the DOM to find the <input>. The HTML would be sort of like this:

<table>
    <tr data-id="11">
        <td><input type="text"></td>
        <td><button>go</button></td>
    </tr>
    <tr data-id="23">
        <td><input type="text"></td>
        <td><button>go</button></td>
    </tr>
    <!-- ... -->
</table>

And the JavaScript sort of like this:

$('table button').click(function() {
    var $tr = $(this).closest('tr');
    var id  = $tr.data('id');
    var val = $tr.find('input[type=text]').val();
    // ...
});

You could also put the click handler in a named function if you like.

You could make it even nicer by attaching a class to the <tr> elements and using that class with closest:

<table>
    <tr data-id="11" class="one-chunk">
        <td><input type="text"></td>
        <!--...-->

and

$('table button').click(function() {
    var $chunk = $(this).closest('one-chunk');
    var id     = $chunk.data('id');
    var val    = $chunk.find('input[type=text]').val();
    //...
});