使用jquery為table動(dòng)態(tài)添加行的實(shí)現(xiàn)代碼

更新時(shí)間：2011年03月30日 23:38:21 作者：

最近，有需要做一個(gè)動(dòng)態(tài)的給table，添加行，用了點(diǎn)時(shí)間，算是做成了。已測(cè)試過(guò)，但如果發(fā)現(xiàn)有什么bug，可以留言，歡迎拍磚。大家一起進(jìn)步。

這里，用的jquery來(lái)做的。關(guān)鍵代碼如下：

 
//添加數(shù)據(jù)行； 
function AddRow(){ 
var vTb=$("#TbData");//得到表格ID=TbData的jquery對(duì)象 
//所有的數(shù)據(jù)行有一個(gè).CaseRow的Class,得到數(shù)據(jù)行的大小 
var vNum=$("#TbData tr").filter(".CaseRow").size()+1;//表格有多少個(gè)數(shù)據(jù)行 
var vTr=$("#TbData #trDataRow1"); //得到表格中的第一行數(shù)據(jù) 
var vTrClone=vTr.clone(true);//創(chuàng)建第一行的副本對(duì)象vTrClone 
vTrClone[0].id="trDataRow"+vNum;//設(shè)置 第一個(gè)Id為當(dāng)前獲取索引；防止重複添加多個(gè)ID為trDataRow1的數(shù)據(jù)行；一次添加一個(gè)； 
vTrClone.appendTo(vTb);//把副本單元格對(duì)象添加到表格下方 
} 

該方法，主要運(yùn)用了jquery的clone函數(shù)，克隆一個(gè)table的行副本。然后添加給原來(lái)的table。
刪除方法關(guān)鍵Code：

復(fù)制代碼代碼如下:

 
var vNum=$("#TbData tr").filter(".CaseRow").size()+1;//表格有多少個(gè)數(shù)據(jù)行; 
if(vNum<=2) 
{ 
alert('請(qǐng)至少留一行'); 
return; 
} 
var vbtnDel=$(this);//得到點(diǎn)擊的按鈕對(duì)象 
var vTr=vbtnDel.parent("td").parent("tr");//得到父tr對(duì)象; 
if(vTr.attr("id")=="trDataRow1") 
{ 
alert('第一行不能刪除!'); //第一行是克隆的基礎(chǔ)，不能刪除 
return; 
}else{ 
vTr.remove(); 
} 

您可能感興趣的文章:

相關(guān)文章

關(guān)于jQuery中的each方法(jQuery到底干了什么)
這篇文章主要介紹了關(guān)于jQuery中的each方法,需要的朋友可以參考下
2014-03-03
jQuery實(shí)現(xiàn)提交表單時(shí)不提交隱藏div中input的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)提交表單時(shí)不提交隱藏div中input的方法,結(jié)合實(shí)例形式分析了通過(guò)設(shè)置input的disabled屬性實(shí)現(xiàn)隱藏input提交的操作技巧,需要的朋友可以參考下
2019-10-10
jQuery實(shí)現(xiàn)簡(jiǎn)單彈窗遮罩效果
本文主要介紹了jquery實(shí)現(xiàn)簡(jiǎn)單彈窗遮罩效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
jQuery事件多次綁定與解綁問(wèn)題實(shí)例分析
這篇文章主要介紹了jQuery事件多次綁定與解綁問(wèn)題,結(jié)合實(shí)例形式分析了jQuery事件多次綁定情況下的運(yùn)行情況,以及解綁相關(guān)操作技巧,需要的朋友可以參考下
2019-02-02
jquery將一個(gè)表單序列化為一個(gè)對(duì)象的方法
將一個(gè)表單序列化為一個(gè)對(duì)象的方法有很多，感興趣的朋友可以了解下本文所介紹的這個(gè)，希望對(duì)大家有所幫助
2013-12-12
jquery實(shí)現(xiàn)適用于門(mén)戶(hù)站的導(dǎo)航下拉菜單效果代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)適用于門(mén)戶(hù)站的導(dǎo)航下拉菜單效果代碼,可實(shí)現(xiàn)鼠標(biāo)滑過(guò)菜單項(xiàng)實(shí)現(xiàn)下拉列表顯示效果的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-08-08
20款效果非常棒的 jQuery 插件小結(jié)分享
這篇文章向大家推薦20款效果非常棒的 jQuery 插件。jQuery 是一個(gè)非常優(yōu)秀的JavaScript庫(kù)，它簡(jiǎn)化了 HTML 文檔遍歷，事件處理，動(dòng)畫(huà)以及 Ajax 交互，同時(shí)也改變了很多人編寫(xiě) JavaScript 代碼的方式
2011-11-11
統(tǒng)計(jì)jQuery中各字符串出現(xiàn)次數(shù)的工具
如果使用一個(gè)變量替換，使用工具壓縮時(shí)將會(huì)進(jìn)一步減少文件的大小
2012-05-05
jQuery Ajax方法調(diào)用 Asp.Net WebService 的詳細(xì)實(shí)例代碼
我在這里將jQuery Ajax 調(diào)用Aspx.Net WebService 的幾個(gè)常用的方法做了一個(gè)整理，提供給正在找這方面內(nèi)容的博友，希望能給學(xué)習(xí)jQuery的朋友一點(diǎn)幫助，可以直接復(fù)制代碼運(yùn)行。
2011-04-04
jQuery中append()方法用法實(shí)例
這篇文章主要介紹了jQuery中append()方法用法,實(shí)例分析了append()方法的功能、定義及在匹配元素的結(jié)尾插入指定內(nèi)容的使用技巧,需要的朋友可以參考下
2015-01-01