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 相关文章推荐
Prototype RegExp对象 学习
Jul 19 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
Jan 04 Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
解决vue项目打包后提示图片文件路径错误的问题
Jul 04 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
微信小程序新闻网站详情页实例代码
Jan 10 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的FTP学习(四)
2006/10/09 PHP
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
php版小黄鸡simsimi聊天机器人接口分享
2014/01/26 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
Javascript 检测、添加、移除样式(className)函数代码
2009/09/08 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
JavaScript中关于iframe滚动条的去除和保留
2016/11/17 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
2017/02/18 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
tab栏切换原理
2017/03/22 Javascript
js实现股票实时刷新数据案例
2017/05/14 Javascript
react-router中的属性详解
2017/06/01 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
Python中itertools模块用法详解
2014/09/25 Python
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
python2与python3共存问题的解决方法
2018/09/18 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
一款利用html5和css3实现的3D滚动特效的教程
2015/01/04 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
2017/09/18 HTML / CSS
html5使用Drag事件编辑器拖拽上传图片的示例代码
2017/08/22 HTML / CSS
英语求职信范文
2014/05/23 职场文书
医德医魂心得体会
2014/09/11 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
新员工考核评语
2014/12/31 职场文书
2015年教师节感言
2015/08/03 职场文书