使用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:
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();
}
復(fù)制代碼 代碼如下:
//添加數(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();
}
您可能感興趣的文章:
- jQuery html表格排序插件tablesorter使用方法詳解
- jQuery實(shí)現(xiàn)鼠標(biāo)跟隨提示層效果代碼(可顯示文本,Div,Table,Html等)
- 使用jQuery操作HTML的table表格的實(shí)例解析
- JQuery動(dòng)態(tài)給table添加、刪除行 改進(jìn)版
- jquery獲取table中的某行全部td的內(nèi)容方法
- jQuery操作表格(table)的常用方法、技巧匯總
- jquery遍歷table的tr獲取td的值實(shí)現(xiàn)方法
- JQuery DataTable刪除行后的頁(yè)面更新利用Ajax解決
- jquery中的sortable排序之后的保存狀態(tài)的解決方法
- jQuery表格插件datatables用法詳解
- jQuery實(shí)現(xiàn)html table行Tr的復(fù)制、刪除、計(jì)算功能
相關(guān)文章
用jQuery解決IE不支持的option disable屬性
使用jQuery解決IE不支持的option disable屬性2009-05-05基于jquery的讓頁(yè)面控件不可用的實(shí)現(xiàn)代碼
當(dāng)用戶需要某項(xiàng)功能時(shí)要填寫一些表單信息,在填寫完成并提交后,該部分信息是不允許再次修改的。表單包含TextBox、DropDownList、CheckBox等控件。2010-04-04jQuery給動(dòng)態(tài)添加的元素綁定事件的方法
這篇文章主要介紹了jQuery給動(dòng)態(tài)添加的元素綁定事件的方法,對(duì)比了jQuery中事件綁定的方法以及常見(jiàn)版本使用綁定的區(qū)別,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jQuery彈層插件jquery.fancybox.js用法實(shí)例
這篇文章主要介紹了jQuery彈層插件jquery.fancybox.js用法,結(jié)合實(shí)例形式分析了jQuery彈出層插件jquery.fancybox.js的功能、用法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-01-01jQuery簡(jiǎn)單注冊(cè)和禁用全局事件的方法
這篇文章主要介紹了jQuery簡(jiǎn)單注冊(cè)和禁用全局事件的方法,結(jié)合實(shí)例形式分析了jQuery中ajaxStart與ajaxStop方法的使用技巧,需要的朋友可以參考下2016-07-07jQuery仿gmail實(shí)現(xiàn)fixed布局的方法
這篇文章主要介紹了jQuery仿gmail實(shí)現(xiàn)fixed布局的方法,涉及jQuery操作頁(yè)面元素屬性的相關(guān)技巧,需要的朋友可以參考下2015-05-05