使用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