Question

我一直在尝试寻找解决方案1或2天，但却无法让它发挥作用..

我有一个id =“items”的表，每行都有“item-row”类。我在articlename字段上使用自动填充（它是一个开票表）。这工作正常..现在，当我想添加一个新行，并触发那些字段的自动完成时，它不起作用..该行不会被添加....

// Get the table object to use for adding a row at the end of the table
var $itemsTable = $('#items');

// Create an Array to for the table row. ** Just to make things a bit easier to read.
var rowTemp = [
    '<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea name="articleName[]" id="articleName"></textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea name="articleDescription[]" id="articleDescription"></textarea></td><td><textarea name="articlePrice[]" id="articlePrice" class="cost">0.00</textarea></td><td><textarea name="articleQty[]" id="articleQty" class="qty">0</textarea></td><td><span class="price">0.00</span></td></tr>'
].join('');

// Add row to list and allow user to use autocomplete to find items.
$("#addrow").bind('click',function(){
    var $row = $(rowTemp);

    // save reference to inputs within row
    var $itemCode           = $row.find('#articleName');
    var $itemDesc           = $row.find('#articleDescription');
    var $itemPrice          = $row.find('#articlePrice');
    var $itemQty            = $row.find('#articleQty');

    if ( $('#articleName:last').val() !== '' ) {

        // apply autocomplete widget to newly created row
        $row.find('#articleName').autocomplete({
            source: 'getproducts.php',
            minLength: 1,
            select: function(event, ui) {
                $itemCode.val(ui.item.itemCode);
                $itemDesc.val(ui.item.itemDesc);
                $itemPrice.val(ui.item.itemPrice);

                // Give focus to the next input field to recieve input from user
                $itemQty.focus();

                return false;
            }
        }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.itemCode + " - " + item.itemDesc + "</a>" )
                .appendTo( ul );
        };
        // Add row after the first row in table
        $('.item-row:last', $itemsTable).after($row);
        $($itemCode).focus();

    } // End if last itemCode input is empty
    return false;
});

A链接的id =“addrow”

顺便说一句，如果我使用以下代码，它会添加一行，但是没有自动完成的情况：

$("#addrow").bind('click',function(){


$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea name="articleName[]" id="articleName"></textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea name="articleDescription[]" id="articleDescription"></textarea></td><td><textarea name="articlePrice[]" id="articlePrice" class="cost">0.00</textarea></td><td><textarea name="articleQty[]" id="articleQty" class="qty">0</textarea></td><td><span class="price">0.00</span></td></tr>');



if ($(".delete").length > 0) $(".delete").show();
bind();

});

我希望有人可以发光或指出我正确的方向..非常感谢。

Answer 1

当您尝试添加新行时，您将拥有不正确的元素的重复ID。自动填充功能将用于第一个ID。所以也许你最好做这样的事情：

您必须修改html代码不才能拥有多个ID相同的元素
尝试使用.on jquery函数为您的自动完成功能

$（ '＃你的表'）。在（ '负荷'， '您的新行级'，函数（）{ $（本）.autocomplete（{ //您的自动填充设置 }）; }）;

Answer 2

我实际上让它使用以下代码：

$("#addrow").bind('click',function(){

    $(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><textarea name="articleName[]" id="articleName"></textarea><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td class="description"><textarea name="articleDescription[]" id="articleDescription"></textarea></td><td><textarea name="articlePrice[]" id="articlePrice" class="cost">0.00</textarea></td><td><textarea name="articleQty[]" id="articleQty" class="qty">0</textarea></td><td><span class="price">0.00</span></td></tr>');


    $(".item-row:last").find('#articleName').autocomplete({
            source: 'getproducts.php',
            select: function(event, ui) {
                var $itemrow = $(this).closest('tr');
                        // Populate the input fields from the returned values
                        $itemrow.find('#articleName').val(ui.item.articleName);
                        $itemrow.find('#articleDescription').val(ui.item.articleDescription);
                        $itemrow.find('#articlePrice').val(ui.item.articlePrice);

                        // Give focus to the next input field to recieve input from user
                        //$('#articleQty').focus();
                        $itemrow.find("#articleQty:last").focus();

                return false;
          }
        // Format the list menu output of the autocomplete
        }).data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.articleName + " - " + item.articleDescription + "</a>" )
                .appendTo( ul );
        };


if ($(".delete").length > 0) $(".delete").show();
bind();

});

这个确实有很多帮助：

var $itemrow = $(this).closest('tr');

也许它仍然不是完美的代码，但它对我有用。

感谢您的回答;）

使用自动完成jquery向表添加行

2 个答案: