Question

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

使用Javascript：

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

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

这是我的小提琴：

http://jsfiddle.net/tejdeep/b6A9R/

此代码克隆表行的前两个单元格。我为每一行添加和删除按钮。

我希望这样：

http://jsfiddle.net/nKkhW/5/

添加按钮想要在那里用于克隆行，删除按钮应该在那里用于克隆的行。

我希望包含功能，而克隆前两个单元格值必须来到克隆行？

如果你对这个问题有疑问，请告诉我。

Answer 1

我在你的问题中理解了什么，在此基础上我创造了Fiddle。希望它能帮助你，除了默认值的情况。

Updated fiddle

要删除行，您可以尝试：

var $actualrow = $(this).closest('.tr_clone');
$actualrow.remove();

Answer 2

<input type="button" value="Delete" onclick="deleteRow(this)"/>

问题是，deleteRow()在哪里？它不在你的小提琴中..

已修复：http://jsfiddle.net/b6A9R/5/

您必须将onLoad更改为No wrap，否则您的功能将无效。

Answer 3

以下是onLoad的更新代码。

JS

 $(document).on('click','input[value="Delete"]',function(){
    deleteRow(this);
});

DEMO

删除按钮不起作用

3 个答案: