jquery clone 添加更多字段答案

【问题标题】：jquery clone to add more filedsjquery clone 添加更多字段
【发布时间】：2015-01-10 06:00:57
【问题描述】：

$(function () { 
    $("#addButton").on("click", function () {

        var newRow = $(".addrows").first().clone().addClass("newAdded");                        newRow.appendTo("#TextBoxesGroup"); 

    });




<form enctype="application/x-www-form-urlencoded" action="" method="post">

<table id="TextBoxesGroup" style="width:auto;margin:0 auto;" >    
    <tr class="addrows"><td  class="required">
Start Time:<br/>
<input type="text" name="StartTime[]" id="StartTime" value="" class="time" size="5">
<button name="starttimenow" id="starttimenow" type="button" onclick="var currentDate = new Date(); var hours = currentDate.getHours(); var minutes = currentDate.getMinutes(); if(hours < 10) { hours = &#39;0&#39; + hours; } if(minutes < 10) { minutes = &#39;0&#39; + minutes; } $(&#39;#StartTime&#39;).val(hours + &#39;:&#39; + minutes);">Now</button>
</td>
<td  class='required' colspan="2">Start Date:<br/>
<input type="text" name="StartDate[]" id="StartDate" value="" class="date" autocomplete="off" size="6">
<button name="startdatetoday" id="startdatetoday" type="button" onclick="var currentDate = new Date(); var month=currentDate.getMonth()+1; if(month < 10) { month = &#39;0&#39; + month; } var day = currentDate.getDate(); if(day < 10) { day = &#39;0&#39; + day; } var year = currentDate.getFullYear(); $(&#39;#StartDate&#39;).val(day + &#39;/&#39; + month + &#39;/&#39; + year)">Today</button>
    </td>
<td class='required' >End Time:<br/>
<input type="text" name="EndTime[]" id="EndTime" value="" class="time" size="5">
<button name="endtimenow" id="endtimenow" type="button" onclick="var currentDate = new Date(); var hours = currentDate.getHours(); var minutes = currentDate.getMinutes(); if(hours < 10) { hours = &#39;0&#39; + hours; } if(minutes < 10) { minutes = &#39;0&#39; + minutes; } $(&#39;#EndTime&#39;).val(hours + &#39;:&#39; + minutes);">Now</button>
</td>
<td class='required' colspan="2" >End Date:<br/>
<input type="text" name="EndDate[]" id="EndDate" value="" class="date" autocomplete="off" size="6">
<button name="enddatetoday" id="enddatetoday" type="button" onclick="var currentDate = new Date(); var month=currentDate.getMonth()+1; if(month < 10) { month = &#39;0&#39; + month; } var day = currentDate.getDate(); if(day < 10) { day = &#39;0&#39; + day; } var year = currentDate.getFullYear(); $(&#39;#EndDate&#39;).val(day + &#39;/&#39; + month + &#39;/&#39; + year)">Today</button>
    </td></tr>
    </table>
    <table>
    <tr>
        <td>
            <input type="button" id="addButton" value="+" />
        </td>

    </tr>
   <tr><td colspan="18" align="center">
<input type="submit" name="Submit" id="Submit" value="Submit" class="formsubmit">
</td></tr>
</table>
</form>

以上是我表单中的一个工作示例。当我按下 + 按钮时，我需要创建多个字段。新字段应为空。此外，当我按下现在/今天按钮时，我需要在除第一个字段之外的确切字段中显示日期和时间。

请帮助我。谢谢！

【问题讨论】：

标签： php jquery clone

【解决方案1】：

$("#addButton").on("click", function () {
    var newRow = $(".addrows").first().clone().addClass("newAdded");   
    newRow.appendTo("#TextBoxesGroup"); 
    $('.newAdded:last-child input').val('');
});

【讨论】：

感谢您的回答。新字段现在是空的。但是当我单击“现在”和“今天”按钮时，第一个字段本身的值会发生变化。不在新领域

【解决方案2】：

使用val('') 清除克隆的输入字段：

$("#addButton").on("click", function () {
    var newRow = $(".addrows").first().clone().addClass("newAdded");
    newRow.find(':input').val('');
    newRow.appendTo("#TextBoxesGroup");
});

要引用正确的行字段，请使用类而不是 ids 和 prev 方法来查找正确的元素：

<input type="text" name="StartTime[]" class="StartTime" value="" class="time" size="5">

JS：

$(this).prev('.StartTime').val(hours + &#39;:&#39; + minutes);

演示：http://jsfiddle.net/XeELs/424/

【讨论】：

【解决方案3】：

使用$(this).prev();

<button name="starttimenow" id="starttimenow" type="button" onclick="var currentDate = new Date(); var hours = currentDate.getHours(); var minutes = currentDate.getMinutes(); if(hours < 10) { hours = &#39;0&#39; + hours; } if(minutes < 10) { minutes = &#39;0&#39; + minutes; } $(this).prev().val(hours + &#39;:&#39; + minutes);">Now</button>

http://jsfiddle.net/XeELs/425/

【讨论】：