如何使用jquery在datatable中选择输入

Posted 2021-04-05

我正在使用创建行函数生成数据表中的行，我想选择add_quantity字段和price_input字段并进行一些计算并在DataTable中每行的total_price字段中显示它们

我正在做这样的事情，但我只能获得行的唯一第一行字段休息仍未计算

这就是我在cart_table中创建行的方法

var t = $('#cart_table').DataTable();

            // $('#add-to-cart_table').on( 'click','.btn-cart', function () {
                t.row.add( [
                    $(this).data('id'),
                    $(this).data('name'),
                    (`<input type="text" id="add_qty" class="prdt-qty" style="width:30px">`),
                    (`  
                        <div class="form-check form-check-inline">
                            <label class="form-check-label">
                                <input class="form-check-input" type="checkbox" checked id="price_checkbox"> 
                            </label>
                            <input type="text" id="price_input" value= "`+$(this).data('by_p') +`" class="disable-form">
                        </div>
                    `),
                    (`<input type="text" disabled id="total_price" class="prdt-qty" style="width:30px">`),
                    ('<a href="#" class="btn btn-xs btn-delete"><i class="fa fa-trash-o"></i></a>')
                ] ).draw( false );

这就是我选择行字段来计算的方法

$('#cart_table').on('click', 'tr', function () {
    var table = $('#cart_table').DataTable();

    var data = table.row(this);
    var qty = $('#add_qty').val();
    var price = $('#price_input').val();
    $('#add_qty').on('keyup',function(){
        qty = $(this).val();
        if(qty >=1 ){
            $('#total_price').val(qty*price);
        }
        else{
            $('#total_price').val(qty);
        }
        console.log(qty);
        console.log(price);
    })
        console.log(data);

} );

答案

因为你在多个元素上使用相同的id。 id是唯一的，不要在多个元素上使用相同的id。你可以用class代替。

$（'＃price_input'）=>仅返回第一个元素，其中id = price_input $（'。price_input'）=>返回class = price_input的所有元素

但是我们可以使用$（'input [id =“price_input”]'）=>返回属性id = price_input的所有元素来破解它

$('#cart_table').on('keyup', 'input[id="add_qty"]', function () {
    var tr= $(this).find('tr');
    var qty = $(this).val();
    var price = tr.find('#price_input').val();

        if(qty >=1 ){
            tr.find('input[id="total_price"]').val(qty*price);
        }
        else{
            tr.find('input[id="total_price"]').val(qty);
        }
        console.log(qty);
        console.log(price);

});