[jQuery]Manipulation--複製:clone (動態多筆維護效果範例)

[jQuery]複製:clone (動態多筆維護效果範例)

語法:

  • 將選擇的東西複製一份:
    • [selector].clone()

 

範例:複製一份tr,產生到tbody裡面,產生動態多筆維護的效果

<HTML>
<HEAD>
<script type="Text/JavaScript" src="js/jQuery.js"></script>
<script type="Text/JavaScript">
$(document).ready(function(){
	
	$('#btnAdd').click(function(){
		//複製一份出來
		var tt=$('#tbd tr[subid="EditZone"]').clone();
		
		//取得DataZone的個數
		var dzcnt=$('#idx').val();
		var NewIndex=parseInt(dzcnt,10)+1;
		$('#idx').val(NewIndex);
		
		//修改subid
		$(tt).attr('subid','DataZone');
		$(tt).attr('subid2','DataZone' + NewIndex);
		
		//修改按鈕id,name,value,bind click事件
		$('#btnAdd',tt)
			.attr('id','btnDel'+NewIndex)
			.attr('value','刪除')
			.attr('subindex',NewIndex)
			.bind('click',rDel);		
		
		//加入複製出來的項目
		$('#tbd').append(tt);
		
		//$('#div1').text(tt.html());
		
		//清除EditZone裡面的input value
		$('#tbd tr[subid="EditZone"] [subid="txt"]').val('');
		
	});
})

function rDel(){
	//var o=window.event.srcElement;
	var xidx=$(this).attr('subindex');
	alert(xidx);
	$('tr[subid2="DataZone' + xidx + '"]').remove();
}
</script>
<style>
	.d1{
		background-color:yellow;
		color:blue;
		font-size:18px;
	}
</style>
</HEAD>
<BODY>
<FORM action="" method=POST id=form1 name=form1>
<input type="hidden" id="idx" name="idx" value="0" />
<table>
	<thead>
		<tr>
			<th>處理</th>
			<th>Uid</th>
			<th>UName</th>
			<th>UTel</th>
			<th>UPhone</th>
		</tr>
	</thead>
	<tbody id="tbd">
		<tr subid="EditZone">
			<td><input type="button" id="btnAdd" name="btnAdd" value="新增"></td>
			<td><input type="textbox" subid="txt" id="txtUid" name="txtUid" value=""></td>
			<td><input type="textbox" subid="txt" id="txtUName" name="txtUName" value=""></td>
			<td><input type="textbox" subid="txt" id="txtUTel" name="txtUTel" value=""></td>
			<td><input type="textbox" subid="txt" id="txtUPnone" name="txtUPnone" value=""></td>
		</tr>
	</tbody>
</table>
<div id="div1"></div>
</FORM>
</BODY>
</HTML>

 


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6) 
topcat
Blog:http://www.dotblogs.com.tw/topcat