jQuery实现表格行和列的动态添加与删除方法【测试可用】

本文实例讲述了jQuery实现表格行和列的动态添加与删除方法。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' hearteta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/style type=' text/CSS '。cl1 {底色： # FFFFFF} .Cl2 {底色： # FFFF99}/style脚本类型=' text/JavaScript ' src=' http : jquery-1。7 .2 .量滴js '/script脚本类型=' text/JavaScript ' var rowCount=0；var colCount=2；函数AddRow(){ row count；var行模板=' tr class=' tr _ '行计数' ' TD '行计数'/tdtd class=' cl1 '内容行数/tdtd类=' cl1 ' a href=' # ' onclick=Delrow('行数')删除/a/TD/tr '；var TableHTML=$(' # TestTable t body ').html()；table HTMl=RowTemplate $(' # TestTable t body ').html(TableHTML)；}函数delRow(_id){ $('#testTable .tr_' _id).hide()；行数-；}函数addCol(){ Colcount；$('#testTable tr ').每个（函数(){ var trHtml=$(this)).html()；trHtml=' TD onclick=' DelCol '(' Colcount ')'增加的TD/TD’；$(这个)。html(TrHTMl)；});}函数delCol(_id){ $('#testTable tr ').每个（函数(){ $(' TD : eq '(_ id ')'，这个).hide()；});colCount-；}函数Mover(_ id){ $(' # TestTable tr :而不是(:优先)').每个（函数(){ $(' TD : eq '(_ id ')'，这个).移除CLaSS(' cl1 ')；$(' TD : eq '(_ id ')'，这个).addCLaSS(' Cl2 ')；});}函数mout(_ id){ $(' # TestTable tr : not(: first)').每个（函数(){ $(' TD : eq '(_ id ')'，这个).移除CLaSS(' Cl2 ')；$(' TD : eq '(_ id ')'，这个).addCLaSS(' cl1 ')；});}/scripttitlejquery操作表格测试/title/head body表id=' TestTable '边框='1 '宽度='500' tr td序号/TD TD onmouseover=' Mover(1)；onmouseout=' mout(1)；'内容/TD TD onmouseover=' Mover(2)；onmouseout=' mout(2)；'操作/td /tr /table输入类型='按钮'值='添加行onclick=' addRow()；'/input type='button' value='添加列onclick=' addCol()；'//正文更多关于jQuery相关内容感兴趣的读者可查看本站专题： 《jQuery表格(table)操作技巧汇总》 、 《jQuery form操作技巧汇总》 、 《jQuery常用插件及用法总结》 、 《jQuery操作json数据技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery拖拽特效与技巧总结》 、 《jquery中Ajax用法总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

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