Question

这是我的html表，我想在tbody的最后一个t的最后一个td上设置事件，所以请指导我如何在jquery中做到这一点。我已尝试过第一个和最后一个选择器，但无法获得正确的结果

 <table id="product_table" style="width: 600px;padding: 20px;">
                <thead>
                    <tr style="background-color: yellow;">
                        <th>Product Name</th>
                        <th>Qty</th>
                        <th>Rate</th>
                        <th>Disc(%)</th>
                        <th>Total</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>

                <tr class="tr" style="background-color: ivory;">
                                                    <td><input type="text" id="product_name" class="product_name" value=""></td>
                                                    <td><input type="text" id="product_qty" class="product_qty" value="1" onblur="set_total($(this))"></td>
                                                    <td><input type="text" id="product_rate" class="product_rate" value="0.00" onblur="set_total($(this))"></td>
                                                    <td><input type="text" id="product_disc" class="product_disc" value="0.00" onblur="set_total($(this))"></td>
                                                    <td><input type="text" id="product_total" class="product_total" value="0.00" disabled="disabled"></td>
                                                    <td><input type="button" class="delete" value="Delete" onclick="delete_product($(this))"></td>
                                                    </tr><tr class="tr" style="background-color: ivory;">
                                                    <td><input type="text" id="product_name" class="product_name" value=""></td>
                                                    <td><input type="text" id="product_qty" class="product_qty" value="1" onblur="set_total($(this))"></td>
                                                    <td><input type="text" id="product_rate" class="product_rate" value="0.00" onblur="set_total($(this))"></td>
                                                    <td><input type="text" id="product_disc" class="product_disc" value="0.00" onblur="set_total($(this))"></td>
                                                    <td><input type="text" id="product_total" class="product_total" value="0.00" disabled="disabled"></td>
                                                    <td><input type="button" class="delete" value="Delete" onclick="delete_product($(this))"></td>
                                                    </tr><tr class="tr" style="background-color: ivory;">
                                                    <td><input type="text" id="product_name" class="product_name" value=""></td>
                                                    <td><input type="text" id="product_qty" class="product_qty" value="1" onblur="set_total($(this))"></td>
                                                    <td><input type="text" id="product_rate" class="product_rate" value="0.00" onblur="set_total($(this))"></td>
                                                    <td><input type="text" id="product_disc" class="product_disc" value="0.00" onblur="set_total($(this))"></td>
                                                    <td><input type="text" id="product_total" class="product_total" value="0.00" disabled="disabled"></td>
                                                    <td><input type="button" class="delete" value="Delete" onclick="delete_product($(this))"></td>
                                                    </tr></tbody>
                <tfoot>
                    <tr>
                        <td colspan="6"><input type="button" id="btn_product" class="btn_product" value="Add Product"></td>
                    </tr>
                <tr><td colspan="4"><div style="float: right">Grand Total</div></td>
                <td style="background-color: ivory;"><input type="text" class="grand_total" id="grand_total" value="0.00"></td>    
                <td></td>
            </tr></tfoot>
        </table>

Answer 1

尝试在此上下文中使用last-child选择器来完成工作，

$('table tr td:last-child').click(function(){
   // your code
});

A demo

Answer 2

另一个版本部分基于Rajaprabhu-Aravindasamy的解决方案：

$('table tr:last-child td:last-child').click(function(event){

  (event.target).innerHTML ="works";

});

Fiddle

这仅适用于最后一行。

如何在html表中使用jquery在tbody的最后一个t的最后一个td上设置事件

2 个答案: