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;
});

这是我在输出中得到的： enter image description here

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

不是slot08，slot07，slot06 ......

问题02：

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

enter image description here

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

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

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

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

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

请帮帮我......

由于

Answer 1

1）如果你改到最后这里会发生什么？

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

它应该以这种方式附加它。

2）更改此部分代码以初始化新的日期选择器：

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

使用jquery生成连续的表行？

2 个答案: