一、效果 二、代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <meta charset="utf-8"/>…
September 13, 2017
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