使用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'); 
     } 
    } 
});