使用jquery为table动态添加行的实现代码
2011-03-30 00:00
861 查看
这里,用的jquery来做的。关键代码如下:
该方法,主要运用了jquery的clone函数,克隆一个table的行副本。然后添加给原来的table。
删除方法关键Code:
//添加數據行; function AddRow(){ var vTb=$("#TbData");//得到表格ID=TbData的jquery对象 //所有的数据行有一个.CaseRow的Class,得到数据行的大小 var vNum=$("#TbData tr").filter(".CaseRow").size()+1;//表格有多少个数据行 var vTr=$("#TbData #trDataRow1"); //得到表格中的第一行数据 var vTrClone=vTr.clone(true);//创建第一行的副本对象vTrClone vTrClone[0].id="trDataRow"+vNum;//設置 第一個Id為當前獲取索引;防止重複添加多個ID為trDataRow1的數據行;一次添加一個; vTrClone.appendTo(vTb);//把副本单元格对象添加到表格下方 }
该方法,主要运用了jquery的clone函数,克隆一个table的行副本。然后添加给原来的table。
删除方法关键Code:
var vNum=$("#TbData tr").filter(".CaseRow").size()+1;//表格有多少个数据行; if(vNum<=2) { alert('请至少留一行'); return; } var vbtnDel=$(this);//得到点击的按钮对象 var vTr=vbtnDel.parent("td").parent("tr");//得到父tr对象; if(vTr.attr("id")=="trDataRow1") { alert('第一行不能删除!'); //第一行是克隆的基础,不能删除 return; }else{ vTr.remove(); }
相关文章推荐
- 使用jquery为table动态添加行的实现代码
- 使用jquery为table动态添加行的实现代码
- jquery实现table动态添加行、删除行以及行的上移和下移
- jQuery动态添加删除select项(实现代码)
- jQuery实现动态添加tr到table的方法
- 使用js实现对table的动态添加、删除和更新
- 巧妙使用JQuery Clone 添加多行数据,并更新到数据库的实现代码
- Jquery实现的table最后一行添加样式的代码
- 自己修改, jquery实现table动态添加行、删除行以及行的上移和下移
- 使用jQuery加DIV实现可以动态添加的金字塔结构
- 使用jquery动态往table添加tr
- Jquery 动态添加按钮实现代码
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- jQuery动态添加 input type=file的实现代码
- 如何使用jquery动态加载js,css文件实现代码
- jQuery动态添加.active 实现导航效果代码思路详解
- jquery依然简短几句代码实现给元素动态添加及获取提示信息
- 使用jquery动态生成的标签,需要在代码当中绑定才可以实现事件的监听