jQuery Modification of dynamically generated HTML Table

Question

I have the following table

    <table id="edit_po_table">
        <thead>
            <tr>
                <th>Discount</th>
                <th>
                    <select id="discount">
                        <option value="0">0%</option>
                        <option value="25">25%</option>
                        <option value="35">35%</option>
                        <option value="42">42%</option>
                        <option value="50">50%</option>
                    </select>
                </th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th>Quantity</th>
                <th>Stock #</th>
                <th>Product Name</th>
                <th>Volume Points</th>
                <th>Price</th>
                <th>Volume Total</th>
                <th>Line Total</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

And the following jQuery code

    $('#table_po_product_list :checkbox').click(function() {

        if($("#table_po_product_list :checkbox").prop('checked')) {

            var i = $("#table_po_product_list input:checked").length;
            $('#bottom-menu span').html(i + (i != 1 ? " items" : " item"));

        } else {

            var i = $("#table_po_product_list input:checked").length;
            $('#bottom-menu span').html(i + (i != 1 ? " items" : " item"));

        }

        var stocknos = $('#table_po_product_list :checked').map(function(){
                return $(this).val();
            }).get().join(',');

        if($('#table_po_product_list :checked').length === 0) {
            $('#edit_po_table tbody').html('');
        }

        alert(stocknos);

        if (stocknos.length > 0) {
            $.ajax({
                type: "POST",
                url: "functions.php",
                data: "ids=" + stocknos, //{'stock_nos[]': stocknos},
                cache: false,
                success: function(html) {

                    $('#edit_po_table tbody').html(html);

                }
            });
        }

    })


    $('#edit_po_table tbody input').on("change", function(event){


            var tdid = $(this).attr('id');

            var qty = $('#edit_po_table tbody tr#'+tdid+' td input').val();

            var vol = $('#edit_po_table tbody tr#'+tdid+' td#vol_pts').text();

            var price = $('#edit_po_table tbody tr#'+tdid+' td#price').text();

            alert(tdid);

            $('#edit_po_table tbody tr#'+tdid+' td#total_vol').html(qty*vol);
            $('#edit_po_table tbody tr#'+tdid+' td#total_price').html(qty*price);

    })

And functions.php will return the following when asked:

<tr id=0141>
<td><input type="text" size="5"></td>
<td>0141</td>
<td>Formula</td>
<td id="vol_pts">23.95</td>
<td id="price">68.49</td>
<td id="total_vol"></td>
<td id="total_price"></td>
</tr>

<tr id=6424>
<td><input type="text" size="5"></td>
<td>6424</td>
<td>Reference Guide (Bilingual)</td>
<td id="vol_pts">0.00</td>
<td id="price">9.20</td>
<td id="total_vol"></td>
<td id="total_price"></td>
</tr>

Now, I am trying to get my $('#edit_po_table tbody input').on("change", function(event) jquery section of code to work but am unable to find a way to make it work.

Basically, this is how I want my code to function, the user is shown a product table, they then select products from the table. The selection gets passed via jquery to functions.php which then spits back the <tbody> data for the edit_po_table.

Then user then needs to fill in the quantity desired, and the table should auto calculate the total volume points and price for the line. i have tried different ways to get the <tr> id, then go to the <td> it only works for the first row, I can't get it to work for any other rows.

Help?

Prasenjit Kumar Nag · Accepted Answer · 2012-05-11 12:16:47Z

3

You can try after modifying the jQuery.on to this

$('#edit_po_table tbody').on("change",'input', function(event){
  //your code

});

This syntax is equivalent to $.live and event binding will persist for dynamically added elements too. :)

answered May 11, 2012 at 12:16

Prasenjit Kumar Nag

13.5k3 gold badges47 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

d123 Over a year ago

ok, then I managed to get the tr id by $(this).parent().closest('tr').attr('id'); but I can only get the first line to update the values, if I have 2 or more lines only the first will work

d123 Over a year ago

I managed to get the answer, jquery was looking for unique ids. I thought by just making the tr unique that would be enough, but its not

Collectives™ on Stack Overflow

jQuery Modification of dynamically generated HTML Table

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related