[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>
以下是簽名：
- 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
| Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |
