使用jQuery的快速訂購表格

Question

我們正在嘗試創建一個快速訂單，客戶在其中輸入物料SKU及其數量，然後縮小到下一行並執行相同操作。在批量輸入時，我們需要讓jQuery對我們的數據庫執行檢查，以確保它是一個真正的SKU，並向客戶端返回成功或失敗消息。我們查看了各種代碼，並通過添加新行並通過檢查單個輸入來找到那些工作的代碼，但我們找不到也無法編寫允許這兩種代碼的代碼。不知道我們是否可以允許輸入的name屬性使用「name []」，或者是否需要設置名稱，「name_1」，「name_2」等。如果我們使用name []，那麼調用數據庫知道使用哪個inut字段來獲取變量。

任何幫助，非常感謝。請參閱我們的代碼如下：日期：

HTML：

<table id="mytable" width="300" border="1" cellspacing="0" cellpadding="2"> 
    <tbody> 
    <tr> 
    <td colspan="2">Quick Order</td> 
    </tr> 
    <tr class="person"> 
    <td><input type="text" name="name[]" class="nameClass" placeholder="Item ID" /></td> 
    <td><input type="text" name="qty[]" class="qtyClass" placeholder="QTY" /></td> 
    </tr> 
    <tr class="person"> 
    <td><input type="text" name="name[]" class="nameClass" placeholder="Item ID" /></td> 
    <td><input type="text" name="qty[]" class="qtyClass" placeholder="QTY" /></td> 
    </tr> 
</tbody> 
</table> 

的Javascript：

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#mytable tbody>tr:last .nameClass").change(function() { 
     $('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last').hide().fadeIn(500); 
     $('#mytable tbody>tr:last .nameClass').val(''); 
     return false; 
    }); // change Function 

    $('.nameClass').blur(item_check); 
    //}); 

}); // doc ready 

function item_check(){ 
    var itemid = $('.nameClass').val(); 
    //console.log(itemid); 
    jQuery.ajax({ 
    type: "POST", 
    url: "checkItem.php", 
    data: 'itemid='+ itemid, 
    cache: false, 
    success: function(response){ 
     if(response == 1){ 
      $('.nameClass').css('border', '3px #C33 solid');  
     }else{ 
      $('.nameClass').css('border', '3px #090 solid'); 
     } 

    } 
}); 
} // end function 
</script> 

Answer 1

不知道是否我們可以允許輸入其名字屬性使用「名稱[ ]「，或者是否需要設置名稱，」name_1「，」name_2「等。如果我們使用name []，那麼對數據庫的調用如何知道哪個inut字段用於獲取變量。

通常，當您將事件附加到輸入時，使用「this」變量可以很容易地識別輸入。你甚至不需要知道輸入的名字。

此外，由於您正在處理可變數量的行，因此您應該查看jQuery's on() method以處理事件。例如（jsfiddle demo）：

var my_table = $('#mytable'); 

// Whenever the last .nameClass input in the table gains focus, clone that row 
my_table.on('focus', '.nameClass:last', function() { 
    var input = $(this); 
    var new_row = input.closest('tr').clone(); 
    $('input', new_row).val(''); // set blank input values for the cloned row 
    $('tbody', my_table).append(new_row); 
}); 

// When a .nameClass input loses focus, check that the SKU in it (if any) is valid 
my_table.on('blur', '.nameClass', function() { 
    var input = $(this); 
    var itemid = $.trim(input.val()); 
    if (itemid) { 
     // Replace demo code with appropriate $.ajax call 
     if (itemid == 'fail') { 
      input.css('border', '3px #C33 solid'); 
     } else { 
      input.css('border', '3px #090 solid'); 
     } 
    } 
});