jQuery实现表格的增、删、改操作示例

本文实例讲述了框架实现表格的增、删、改操作。分享给大家供大家参考，具体如下：

这里实现的是在框架中通过按钮的形式，对表格进行的一些基本操作，可以实现表格的增删改操作，并实现对鼠标事件监听，实现表格的高亮行操作。

head meta charset=' UTF-8 ' titlewww.jb51.net jQuery表格操作/title脚本src=' http :http://libs。百度。com/jquery/2。0 .0/jquery。量滴js '/script脚本类型=' text/JavaScript ' $(文档)。就绪（函数(){ //添加一行$('#one ').click(function(){ var $ TD=$(' # trOne ')).clone()；$("表")。追加($ TD)；$(“表tr :最后一个”).查找('输入')。val(" ")；});//删除一行$(' #二')。单击(function(){ $(' table tr :不是(:第一个):最后一个').移除();});//删除所有行$(' #三')。click(function(){/* var len=$(' tr ')).长度；for(var I=0；i=leni ){ $('tr')[i].移除();}*///除第一行为其它行删除$('tr:not(:first)').移除();});//删除选中的行$(' #四')。单击(函数(){ //遍历选中的复选框$('[type=' checkbox ']:已选中').每个（函数(){ //获取检验盒所在行的顺序n=$(这个)。父母(' tr ').index()；$("表")。find('tr:eq(' n ')).移除();});});//设置高亮行$('tr ').mouseover(函数(){ $(this)).css(“”背景色','红色');});$('tr ').mouseout(函数(){ $(此)).css(“”背景色','白色');});});/脚本/流浆池输入类型='button' id='one '值='添加一行/br /输入类型='button' id='two '值='删除一行/br /输入类型='button' id='three '值='删除所有行/br /输入类型='button' id='four '值='删除选中的行/br/表格宽度='400px '高度='50px '边框='2px '单元格间距='0 '单元格填充=' 0 ' tr id=' trOne ' t输入类型=' checkbox ' name=' '/TD t输入类型=' name=' value='姓名/TD tdinput type=' name=' value='年龄/TD tdinput type=' name=' value='性别/TD/tr/tr t输入类型=' checkbox ' name=' '/TD t输入类型=' name=' value='张三/TD tdinput类型=name=' value=' 18 '/TD tdinput type=' name=' value='男/TD/tr/tr t输入类型=' checkbox ' name=' '/TD t输入类型=' name=' value='李四/TD tdinput type=' name=' value=' 18 '/TD tdinput type=' name=' value='男/TD/tr/tr t输入类型='复选框'名称=' '/TD t输入类型='名称=值='王五/TD tdinput type=' name=' value=' 18 '/TD tdinput type=' name=' value='男TD/tr/表格/正文效果图如下：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码运行效果。

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery表格(table)操作技巧汇总》 、 《jQuery操作xml技巧总结》 、 《jQuery form操作技巧汇总》 、 《jQuery常用插件及用法总结》 、 《jQuery扩展技巧总结》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。