更新

Question

我要求表格中有添加行按钮和删除行按钮，我在下面的代码中显示。

为了添加一行，我想克隆前两个值＆＃34; who＆＃34;和＆＃34;位置＆＃34;当我点击添加行时，当前行获取下一行。如果我有关于＆＃34;谁＆＃34;的不同细节。和＆＃34;位置＆＃34;在第三行，当我点击＆＃34;添加行＆＃34;它必须采用第三行的相同细节，并添加第四行的详细信息＆＃34; who＆＃34;和＆＃34;位置＆＃34;在第三排。

希望您了解这种情况。

Html表：

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
    <tr>
        <td>Name</td>
        <td>Location</td>
        <td>From</td>
        <td>To</td>
        <td>Add</td>
    </tr>
    <tr class="tr_clone">
        <td><input type="text"  placeholder="who" name="who" /></td>
        <td><input type="text"  placeholder="location" name="location" /></td>
        <td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"/></td>
        <td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"/></td>
        <td><input type="button" name="add" value="Add" class="tr_clone_add"/></td>
        <td><input type="button" value="Delete" onclick="deleteRow(this)"/></td>
    </tr>
</table><!-- /table#table-data -->

Jquery的：

<script>
    $("input.tr_clone_add").live('click', function() {
        var $tr    = $(this).closest('.tr_clone');
        var $clone = $tr.clone();
        $clone.find(':text').val('');
        $tr.after($clone);
    });
    </script>

使用Javascript：

<script>
function deleteRow(r)
{
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("table-data").deleteRow(i);
}
</script>

Answer 1

您的问题：在将其添加到HTML标记之前尝试更改input值。

解决方案：将元素添加到HTML后更改值。

此外，在这种情况下，使用类选择器.datepicker会更好。

这将有效，

$("input.tr_clone_add").live('click', function() {
    var $tr    = $(this).closest('.tr_clone');
    console.log($tr);
    var $clone = $tr.clone();
    $tr.after($clone);
    $($clone).find(".datepicker").val('');
});

<强> DEMO

Answer 2

更新：我错过了解问题，因为您不需要日期，这是您的回答和更新fiddle

代码段：

$("input.tr_clone_add").live('click', function() {
    var $tr    = $(this).closest('.tr_clone');
    var $clone = $tr.clone();
    $clone.find('.datepicker').val('');
    $tr.after($clone);
});

Answer 3

工作JS小提琴演示http://jsfiddle.net/D36ZL/1/

您的HTML：

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="table-data">
    <tr>
        <td>Name</td>
        <td>Location</td>
        <td>From</td>
        <td>To</td>
        <td>Add</td>
    </tr>
    <tr class="tr_clone">
        <td>
            <input type="text" placeholder="who" name="who" />
        </td>
        <td>
            <input type="text" placeholder="location" name="location" />
        </td>
        <td>
            <input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker" />
        </td>
        <td>
            <input type="text" placeholder="End Date" name="datepicker_end" class="datepicker" />
        </td>
        <td>
            <input type="button" name="add" value="Add" class="tr_clone_add" />
        </td>
        <td>
            <input type="button" value="Delete" onclick="deleteRow(this)" />
        </td>
    </tr>
</table>
<!-- /table#table-data -->

一些jQuery：

$("table").on('click', 'input.tr_clone_add', function () {
    var $tr = $(this).closest('.tr_clone');
    var $clone = $tr.clone();
    $tr.after($clone);
    $clone.find('.datepicker').val('');
});

使用$("table").on('click', 'input.tr_clone_add', function () {是一种更好的方法，因为您正在动态生成HTML。

干杯！

更新

如上所述，没有必要将类datepicker放入循环中，因此改变了解决方案。

克隆当前行的前两个文本框值？

3 个答案:

更新