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


Posted in Javascript onAugust 01, 2016

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

运行效果截图如下:

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

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.cl1{
  background-color:#FFFFFF;
}
.cl2{
  background-color:#FFFF99;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
  var rowCount = 0;
  var colCount = 2;
  function addRow(){
    rowCount++;
    var rowTemplate = '<tr class="tr_'+rowCount+'"><td>'+rowCount+'</td><td class="cl1">内容'+rowCount+'</td><td class="cl1"><a href="#" onclick=delRow('+rowCount+')>删除</a></td></tr>';
    var tableHtml = $("#testTable tbody").html();
    tableHtml += rowTemplate;
    $("#testTable tbody").html(tableHtml);
  }
  function delRow(_id){
    $("#testTable .tr_"+_id).hide();
    rowCount--;
  }
  function addCol(){
    colCount++;
    $("#testTable tr").each(function(){
      var trHtml = $(this).html();
      trHtml += '<td onclick="delCol('+colCount+')">增加的td</td>';
      $(this).html(trHtml);
    });
  }
  function delCol(_id){
    $("#testTable tr").each(function(){
      $("td:eq("+_id+")",this).hide();
    });
    colCount--;
  }
  function mover(_id){
    $("#testTable tr:not(:first)").each(function(){
      $("td:eq("+_id+")",this).removeClass("cl1");
      $("td:eq("+_id+")",this).addClass("cl2");
    });
  }
  function mout(_id){
    $("#testTable tr:not(:first)").each(function(){
      $("td:eq("+_id+")",this).removeClass("cl2");
      $("td:eq("+_id+")",this).addClass("cl1");
    });
  }
</script>
<title>jquery操作表格测试</title>
</head>
<body>
  <table id="testTable" border="1" width="500">
    <tr>
      <td>序号</td>
      <td onmouseover="mover(1);" onmouseout="mout(1);">内容</td>
      <td onmouseover="mover(2);" onmouseout="mout(2);">操作</td>
    </tr>
  </table>
  <input type="button" value="添加行" onclick="addRow();"/>
  <input type="button" value="添加列" onclick="addCol();"/>
</body>

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

Javascript 相关文章推荐
js 自定义的联动下拉框
Feb 07 Javascript
brook javascript框架介绍
Oct 10 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
Nov 21 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
vue-cli 引入、配置axios的方法
May 08 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
原生js实现下拉选项卡
Nov 27 Javascript
微信小程序实现分页加载效果
Nov 19 Javascript
Angular 页面跳转时传参问题
Aug 01 #Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 #Javascript
1秒50万字!js实现关键词匹配
Aug 01 #Javascript
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
Aug 01 #Javascript
JS实现数字格式千分位相互转换方法
Aug 01 #Javascript
AngularJS ng-controller 指令简单实例
Aug 01 #Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 #Javascript
You might like
基于mysql的论坛(5)
2006/10/09 PHP
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
如何在centos8自定义目录安装php7.3
2019/11/28 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
javascript 对象比较实现代码
2009/04/27 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
Bootstrap学习笔记之js组件(4)
2016/06/12 Javascript
vue实现简单实时汇率计算功能
2017/01/15 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
2018/12/03 Javascript
Angular 中使用 FineReport不显示报表直接打印预览
2019/08/21 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
python图片验证码生成代码
2016/07/02 Python
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
python requests.post带head和body的实例
2019/01/02 Python
python文件操作的简单方法总结
2019/11/07 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的代码
2020/11/30 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
国外平面设计第一市场:99designs
2016/10/25 全球购物
表彰会主持词
2014/03/26 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
环保建议书500字
2014/05/14 职场文书
端午节活动总结
2014/08/26 职场文书
2014年平安创建工作总结
2014/11/24 职场文书
主持人大赛开场白
2015/05/29 职场文书
《开国大典》教学反思
2016/02/16 职场文书