Question

我想对每个新行字段应用不同的功能，这些新字段具有相同的名称和ID（使用jQuery添加新行功能）。

    $('body').on("click", "#addrow", function(e) {

    var newRow = $("<tr class='txtMult'>");
    var cols = "";
cols += '<td style="margin-top:15px;line-height:25px">' + counter + '</td>';
cols += '<td><input style="width:150px;margin-top:1px;" class="select2" type="text" id="ProductName_'+ counter +'" name="ProductName[]"><input style="width:90%;" type="hidden" id="hdnProductName_'+ counter +'" name="ProductId[]"></td>'
cols += '<td style="text-align:center;"><input style="width:95%; margin-top:1px;" class="select2" type="text" id="LocationName_'+ counter +'" name="LocationName_[]"><input style="width:90%;" type="hidden" id="hdnLocationName_'+ counter +'" name="LocationId[]"></td>';
cols += '<td style="text-align:center;"><input style="width:95%; margin-top:1px;" class="select2" type="text" id="ColourName_'+ counter +'" name="ColourName[]"><input style="width:90%;" type="hidden" id="hdnColourName_'+ counter +'" name="ColourId[]"></td>';
cols += '<td><input style="width:90%; margin-top:1px; text-align:right;" type="number" id="Rate'+ counter +'" class="Rate" name="Rate[]" autocomplete="off"></td>';
cols += '<td><input style="width:65%; margin-top:1px; text-align:right;" type="number" id="Quantity'+ counter +'" class="Quantity" name="Quantity[]" autocomplete="off"></td>';
cols += '<td><input style="width:90%; margin-top:1px; text-align:right;" type="number" id="Amount'+ counter +'" class="Amount" name="Amount[]"></td>';
cols += '<td style="width:70px;text-align:right; cursor:pointer; color:red;"><i class="icon icon-trash remove" title="Delete" style="margin-top:1px;"></i></td>';

    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;
});

我希望每次基于从jQuery生成的ProductId调用此函数。但这仅在第一行起作用，而其他行不起作用。

            $('body').on('change', 'input[id^=LocationName]', function(){
            var ProductId = $('[name=ProductId]').val();
            var LocationId = $('[name=LocationId]').val();

            $.ajax({
               type: 'POST',
               dataType: 'html',
               data: ('LocationId='+LocationId+'&ProductId='+ProductId),
               url: "<?php echo base_url('Sales/GetRemainingProduct'); ?>",
               success: function(response){
                $('#RemainingStock').html(response);
               }
            });
        });

一切都很好，但是正在根据第一行的第一个id调用该函数。

Answer 1

您应该更改您的productId和locationId的选择器，无论采用哪种元素，它们都将采用html中找到的第一个元素。对于位置，您可以使用：

$(this).val()

要获取已更改的元素。对于产品，您可以先选择父级，然后再选择与该位置相关联的子级：

 $(this).parent().find('[name=LocationId]').val()

Answer 2

问题：

您希望每次更改产品名称文本框时发送服务器请求
这是第一次工作

解决方案：


首先，您需要在动态添加的行中填写ProductId标签。

第二，您需要两个文本框属性，如下所示：

LocationId来自ProductName_1、2、3等。
  来自hdnLocationName__1、2、3等的
counter。



您需要在javascript中声明一个var counter = 1; $('body').on("click", "#addrow", function (e) { var newRow = $("<tr class='txtMult'>"); var cols = ""; cols += '<td style="margin-top:15px;line-height:25px">' + counter + '</td>'; cols += '<td><input style="width:150px;margin-top:1px;" class="select2" type="text" id="ProductName_' + counter + '" name="ProductName[]"><input style="width:90%;" type="hidden" id="hdnProductName_' + counter + '" name="ProductId[]"></td>' cols += '<td style="text-align:center;"><input style="width:95%; margin-top:1px;" class="select2" type="text" id="LocationName_' + counter + '" name="LocationName_[]"><input style="width:90%;" type="hidden" id="hdnLocationName_' + counter + '" name="LocationId[]"></td>'; cols += '<td style="text-align:center;"><input style="width:95%; margin-top:1px;" class="select2" type="text" id="ColourName_' + counter + '" name="ColourName[]"><input style="width:90%;" type="hidden" id="hdnColourName_' + counter + '" name="ColourId[]"></td>'; cols += '<td><input style="width:90%; margin-top:1px; text-align:right;" type="number" id="Rate' + counter + '" class="Rate" name="Rate[]" autocomplete="off"></td>'; cols += '<td><input style="width:65%; margin-top:1px; text-align:right;" type="number" id="Quantity' + counter + '" class="Quantity" name="Quantity[]" autocomplete="off"></td>'; cols += '<td><input style="width:90%; margin-top:1px; text-align:right;" type="number" id="Amount' + counter + '" class="Amount" name="Amount[]"></td>'; cols += '<td style="width:70px;text-align:right; cursor:pointer; color:red;"><i class="icon icon-trash remove" title="Delete" style="margin-top:1px;"></i></td>'; newRow.append(cols); newRow.append('</tr>'); $(".table").append(newRow); counter++; }); $('body').on('change', 'input[id^=LocationName]', function () { var ProductId = $(this).attr('name'); var LocationId = $(this).parents('tr').find('input[id^=hdnLocationName]').attr('name'); console.log('Goint to server for ProductId : ' + ProductId + ', LocationId : ' + LocationId); $.ajax({ type: 'POST', dataType: 'html', data: ('LocationId=' + LocationId + '&ProductId=' + ProductId), url: "<?php echo base_url('Sales/GetRemainingProduct'); ?>", success: function (response) { $('#RemainingStock').html(response); } }); });变量以显示行索引。

请检查以下代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="addrow">Add New Row</button>

<table class="table"></table>

Error Message - Unexpected error while saving file:/path/ database is locked

我想在通过jQuery

2 个答案: