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 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
node.js中的fs.open方法使用说明
Dec 17 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
jquery实现漂亮的二级下拉菜单代码
Aug 26 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 Javascript
Javascript农历与公历相互转换的简单实例
Oct 09 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
Dec 28 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 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
PHP中一个控制字符串输出的函数
2006/10/09 PHP
PHP删除目录及目录下所有文件的方法详解
2013/06/06 PHP
探讨:如何编写PHP扩展
2013/06/13 PHP
php使用websocket示例详解
2014/03/12 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
jQuery 获取URL参数的插件
2010/03/04 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
2011/01/06 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
Bootstrap提示框效果的实例代码
2017/07/12 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
2020/08/05 Javascript
vue+element实现动态加载表单
2020/12/13 Vue.js
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
Python简单连接MongoDB数据库的方法
2016/03/15 Python
你应该知道的python列表去重方法
2017/01/17 Python
如何通过python画loss曲线的方法
2019/06/26 Python
python 实现return返回多个值
2019/11/19 Python
Python模块future用法原理详解
2020/01/20 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
Python用K-means聚类算法进行客户分群的实现
2020/08/23 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
电脑售后服务承诺书
2014/03/27 职场文书
2014年乡镇工会工作总结
2014/12/02 职场文书
手机销售员岗位职责
2015/04/11 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
民事起诉状范文
2015/05/19 职场文书
护士心得体会范文
2016/01/25 职场文书
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android
JS前端使用canvas实现物体的点选示例
2022/08/05 Javascript
Springboot集成kafka高级应用实战分享
2022/08/14 Java/Android