使用jQuery生成连续的表行？

Question

问题01：

我试图使用jQuery下面一行之后产生连续的表行..

这里是我的默认行HTML代码：

<tr> 
    <td><b>Slot 01</b></td> 
    <td><input class="form-control" type="date" id="delvDate1" name="delvDate[]" required="required" /></td> 
    <td><input class="form-control" type="text" id="delvQnty1" name="delvQnty[]" required="required" /></td> 
    <td><input class="form-control" type="text" id="delvBalance1" name="delvBalance[]" required="required" /></td> 
    <td><input class="form-control" type="text" id="delvRemarks1" name="delvRemarks[]" required="required" /></td> 
</tr> 

这里是我的jQuery代码：

var MaxInputs = 7; //maximum input fields allowed 
var InputsWrapper = $("#deliveryStatusTable tr").first().next().prev(); //Input fields wrapper ID 
var AddButton = $("#addAnotherDeliveryStatus"); //Add button ID 
var x = InputsWrapper.length; //initlal text fields count 
var FieldCount = 1; //to keep track of text fields added 
$(AddButton).click(function(e) //on add input button click 
{ 
    if (x <= MaxInputs) //max input box allowed 
    { 
     FieldCount = FieldCount + 1; //text box added increment 
//add input box 
     $(InputsWrapper).after(
       '<tr id="idleRow' + FieldCount + '"><td><b>Slot 0' + FieldCount + '</b></td><td><input class="form-control" type="date" id="delvDate' + FieldCount + '" name="delvDate[]" value="delvDate' + FieldCount + '" required="required" /></td><td><input class="form-control" type="text" id="delvQnty' + FieldCount + '" name="delvQnty[]" required="required" /></td><td><input class="form-control" type="text" id="delvBalance' + FieldCount + '" name="delvBalance[]" required="required" /></td><td><input class="form-control" type="text" id="delvRemarks' + FieldCount + '" name="delvRemarks[]" required="required" /></td></tr>' 
       ); 
     x++; //text box increment 
    } 
    return false; 
}); 

以下是我在输出中得到的结果：

我需要slot01，slot02，slot03 ....等等

不slot08，slot07，slot06 ...

问题02：

在这同一个表在交货日期字段中，引导程序日历显示如下图：

但在其他字段中未显示日历UI。我已经写了这些字段的代码..如下所示：

$('#delvDate1').datetimepicker({ 
    pickTime: false 
}); 

$('#delvDate2').datetimepicker({ 
    pickTime: false 
}); 

$('#delvDate3').datetimepicker({ 
    pickTime: false 
}); 

在这里我检查了id值是否正常。那么为什么只有第一个工作，但其他人不是？

请帮我在这里...

感谢

Answer 1

1）如果你改变持续在这里会发生什么？

var InputsWrapper = $("#deliveryStatusTable tr").last().prev(); 

它应该在最后这样追加它。

2）改变这部分代码初始化新datepickers：

if (x <= MaxInputs) //max input box allowed 
    { 
     FieldCount = FieldCount + 1; //text box added increment 
     lasttr= $("#deliveryStatusTable tr").last().prev(); 
     $(lasttr).after(
       '<tr id="idleRow' + FieldCount + '"><td><b>Slot 0' + FieldCount + '</b></td><td><input class="form-control" type="date" id="delvDate' + FieldCount + '" name="delvDate[]" value="delvDate' + FieldCount + '" required="required" /></td><td><input class="form-control" type="text" id="delvQnty' + FieldCount + '" name="delvQnty[]" required="required" /></td><td><input class="form-control" type="text" id="delvBalance' + FieldCount + '" name="delvBalance[]" required="required" /></td><td><input class="form-control" type="text" id="delvRemarks' + FieldCount + '" name="delvRemarks[]" required="required" /></td></tr>' 
       ); 
     $('#delvDate' + FieldCount).datepicker(); 
     x++; //text box increment 
    } 

我固定部分1）

编辑：我重新固定代码。有一些错误：

var MaxInputs = 7; //maximum input fields allowed 
var InputsWrapper = $("#deliveryStatusTable tr").last().prev(); //Input fields wrapper ID 
var AddButton = $("#addAnotherDeliveryStatus"); //Add button ID 
var x = 1; 
var FieldCount = 1; //to keep track of text fields added 
$(AddButton).click(function(e) //on add input button click 
{ 
    if (x <= MaxInputs) //max input box allowed 
    { 
     FieldCount = FieldCount + 1; //text box added increment 
//add input box 
     lasttr=$("#deliveryStatusTable tr").last().prev(); 
     $(lasttr).after(
       '<tr id="idleRow' + FieldCount + '"><td><b>Slot 0' + FieldCount + '</b></td><td><input class="form-control" type="date" id="delvDate' + FieldCount + '" name="delvDate[]" value="delvDate' + FieldCount + '" required="required" /></td><td><input class="form-control" type="text" id="delvQnty' + FieldCount + '" name="delvQnty[]" required="required" /></td><td><input class="form-control" type="text" id="delvBalance' + FieldCount + '" name="delvBalance[]" required="required" /></td><td><input class="form-control" type="text" id="delvRemarks' + FieldCount + '" name="delvRemarks[]" required="required" /></td></tr>' 
       ); 
     x++; //text box increment 
    } 
    return false; 
}); 

Answer 2

答复Q1。尝试更换这行：

$(InputsWrapper).after(

有：

$("#deliveryStatusTable").append(

演示Here