使用jquery為table動態(tài)添加行的實現(xiàn)代碼
更新時間：2011年03月30日 23:38:21 作者：
最近，有需要做一個動態(tài)的給table，添加行，用了點時間，算是做成了。已測試過，但如果發(fā)現(xiàn)有什么bug，可以留言，歡迎拍磚。大家一起進步。
這里，用的jquery來做的。關(guān)鍵代碼如下：
//添加數(shù)據(jù)行；
function AddRow(){
var vTb=$("#TbData");//得到表格ID=TbData的jquery對象
//所有的數(shù)據(jù)行有一個.CaseRow的Class,得到數(shù)據(jù)行的大小
var vNum=$("#TbData tr").filter(".CaseRow").size()+1;//表格有多少個數(shù)據(jù)行
var vTr=$("#TbData #trDataRow1"); //得到表格中的第一行數(shù)據(jù)
var vTrClone=vTr.clone(true);//創(chuàng)建第一行的副本對象vTrClone
vTrClone[0].id="trDataRow"+vNum;//設(shè)置 第一個Id為當前獲取索引；防止重複添加多個ID為trDataRow1的數(shù)據(jù)行；一次添加一個；
vTrClone.appendTo(vTb);//把副本單元格對象添加到表格下方
}
該方法，主要運用了jquery的clone函數(shù)，克隆一個table的行副本。然后添加給原來的table。
刪除方法關(guān)鍵Code：
var vNum=$("#TbData tr").filter(".CaseRow").size()+1;//表格有多少個數(shù)據(jù)行;
if(vNum<=2)
{
alert('請至少留一行');
return;
}
var vbtnDel=$(this);//得到點擊的按鈕對象
var vTr=vbtnDel.parent("td").parent("tr");//得到父tr對象;
if(vTr.attr("id")=="trDataRow1")
{
alert('第一行不能刪除!'); //第一行是克隆的基礎(chǔ)，不能刪除
return;
}else{
vTr.remove();
}
復(fù)制代碼 代碼如下:
//添加數(shù)據(jù)行；
function AddRow(){
var vTb=$("#TbData");//得到表格ID=TbData的jquery對象
//所有的數(shù)據(jù)行有一個.CaseRow的Class,得到數(shù)據(jù)行的大小
var vNum=$("#TbData tr").filter(".CaseRow").size()+1;//表格有多少個數(shù)據(jù)行
var vTr=$("#TbData #trDataRow1"); //得到表格中的第一行數(shù)據(jù)
var vTrClone=vTr.clone(true);//創(chuàng)建第一行的副本對象vTrClone
vTrClone[0].id="trDataRow"+vNum;//設(shè)置 第一個Id為當前獲取索引；防止重複添加多個ID為trDataRow1的數(shù)據(jù)行；一次添加一個；
vTrClone.appendTo(vTb);//把副本單元格對象添加到表格下方
}
該方法，主要運用了jquery的clone函數(shù)，克隆一個table的行副本。然后添加給原來的table。
刪除方法關(guān)鍵Code：
復(fù)制代碼 代碼如下:
var vNum=$("#TbData tr").filter(".CaseRow").size()+1;//表格有多少個數(shù)據(jù)行;
if(vNum<=2)
{
alert('請至少留一行');
return;
}
var vbtnDel=$(this);//得到點擊的按鈕對象
var vTr=vbtnDel.parent("td").parent("tr");//得到父tr對象;
if(vTr.attr("id")=="trDataRow1")
{
alert('第一行不能刪除!'); //第一行是克隆的基礎(chǔ)，不能刪除
return;
}else{
vTr.remove();
}
您可能感興趣的文章:
- jQuery html表格排序插件tablesorter使用方法詳解
- jQuery實現(xiàn)鼠標跟隨提示層效果代碼(可顯示文本,Div,Table,Html等)
- 使用jQuery操作HTML的table表格的實例解析
- JQuery動態(tài)給table添加、刪除行 改進版
- jquery獲取table中的某行全部td的內(nèi)容方法
- jQuery操作表格（table）的常用方法、技巧匯總
- jquery遍歷table的tr獲取td的值實現(xiàn)方法
- JQuery DataTable刪除行后的頁面更新利用Ajax解決
- jquery中的sortable排序之后的保存狀態(tài)的解決方法
- jQuery表格插件datatables用法詳解
- jQuery實現(xiàn)html table行Tr的復(fù)制、刪除、計算功能
相關(guān)文章
關(guān)于jQuery中的each方法(jQuery到底干了什么)
這篇文章主要介紹了關(guān)于jQuery中的each方法,需要的朋友可以參考下2014-03-03
jQuery實現(xiàn)提交表單時不提交隱藏div中input的方法
這篇文章主要介紹了jQuery實現(xiàn)提交表單時不提交隱藏div中input的方法,結(jié)合實例形式分析了通過設(shè)置input的disabled屬性實現(xiàn)隱藏input提交的操作技巧,需要的朋友可以參考下2019-10-10
本文主要介紹了jquery實現(xiàn)簡單彈窗遮罩效果的實例，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了jQuery事件多次綁定與解綁問題,結(jié)合實例形式分析了jQuery事件多次綁定情況下的運行情況,以及解綁相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
將一個表單序列化為一個對象的方法有很多，感興趣的朋友可以了解下本文所介紹的這個，希望對大家有所幫助2013-12-12
jquery實現(xiàn)適用于門戶站的導(dǎo)航下拉菜單效果代碼
這篇文章主要介紹了jquery實現(xiàn)適用于門戶站的導(dǎo)航下拉菜單效果代碼,可實現(xiàn)鼠標滑過菜單項實現(xiàn)下拉列表顯示效果的功能,非常具有實用價值,需要的朋友可以參考下2015-08-08
這篇文章向大家推薦20款效果非常棒的 jQuery 插件。jQuery 是一個非常優(yōu)秀的JavaScript庫，它簡化了 HTML 文檔遍歷，事件處理，動畫以及 Ajax 交互，同時也改變了很多人編寫 JavaScript 代碼的方式2011-11-11
統(tǒng)計jQuery中各字符串出現(xiàn)次數(shù)的工具
如果使用一個變量替換，使用工具壓縮時將會進一步減少文件的大小2012-05-05
jQuery Ajax方法調(diào)用 Asp.Net WebService 的詳細實例代碼
我在這里將jQuery Ajax 調(diào)用Aspx.Net WebService 的幾個常用的方法做了一個整理，提供給正在找這方面內(nèi)容的博友，希望能給學(xué)習(xí)jQuery的朋友一點幫助，可以直接復(fù)制代碼運行。2011-04-04
這篇文章主要介紹了jQuery中append()方法用法,實例分析了append()方法的功能、定義及在匹配元素的結(jié)尾插入指定內(nèi)容的使用技巧,需要的朋友可以參考下2015-01-01