jQuery:复制行,克隆行 Clone table row

核心代码:

var $tr    = $(this).closest('.tr_clone');
var $clone = $tr.clone();
$clone.find(':text').val('');
$tr.after($clone);

实例:

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" autofocus placeholder="who" name="who" ></td>
        <td><input type="text" autofocus 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>
    </tr>
</table><!-- /table#table-data -->

JS:

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

 

本文:jQuery:复制行,克隆行 Clone table row

Leave a Reply