jQuery实现动态操作table行


Posted in jQuery onNovember 23, 2020

JQuery 实现动态操作 table 行,供大家参考,具体内容如下

实现效果:可动态实现table添加行和删除行,如下图。

jQuery实现动态操作table行

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Html动态Table</title>
 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 <style>
  table {
   border: 1px solid #e9e9e9;
   border-collapse: collapse;
   border-spacing: 0;
  }

  tr,td {
   border: 1px solid #e9e9e9;
   text-align: center;
  }

  tr {
   height: 20px;
   background-color: #f7f7f7;
   color: #5c6b77;
   font-weight: 600;
  }

  td {
   width: 200px;
  }

  input {
   width: 150px;
  }
 </style>
</head>
<body>

<div style="width: 1000px;height: 250px;overflow-y: auto">
 <table id="dynamicTable">
  <tr>
   <td>列1</td>
   <td>列2</td>
   <td>列3</td>
   <td>列4</td>
   <td>操作</td>
  </tr>
  <tr>
   <td colspan="5"><button onclick="addRow()">添加行</button></td>
  </tr>
 </table>
</div>
<script>
 function addRow() {

  var trArray = $("#dynamicTable").find("tr");
  var thisIndex = trArray.length - 1;

  var addRowHtmlStr = "<tr>" +
   "<td><input type='text'></td>" +
   "<td><input type='text'></td>" +
   "<td><input type='text'></td>" +
   "<td><input type='text'></td>" +
   "<td><button onclick='removeRow(" + thisIndex + ")'>删除行</button></td>" +
   "</tr>"
  $("#dynamicTable tr:last").before(addRowHtmlStr);
 }

 function removeRow(index) {
  $("#dynamicTable").find("tr").eq(index).remove();

  // 删除行时需要注意 index 变化问题
  var trArrayNow = $("#dynamicTable").find("tr");
  for(var i = index; i < trArrayNow.length -1; i++) {
   $("#dynamicTable").find("tr").eq(i).find("td").eq(4).remove();
   var htmlStr = "<td><button onclick='removeRow(" + i + ")'>删除行</button></td>"
   $("#dynamicTable").find("tr").eq(i).append(htmlStr)
  }
 }

</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
jquery多级树形下拉菜单的实例代码
Jul 09 jQuery
jQuery与原生JavaScript选择HTML元素集合用法对比分析
Nov 26 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jquery轮播图插件使用方法详解
Jul 31 jQuery
jQuery-App输入框实现实时搜索
Nov 19 #jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 #jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 #jQuery
如何在vue 中引入使用jquery
Nov 10 #jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 #jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 #jQuery
Jquery Fade用法详解
Nov 06 #jQuery
You might like
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
PHP MySQL应用中使用XOR运算加密算法分享
2011/08/28 PHP
PHP 图片上传代码
2011/09/13 PHP
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
PHP-redis中文文档介绍
2013/02/07 PHP
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
2012/12/17 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
python实现逻辑回归的方法示例
2017/05/02 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
Python单元测试实例详解
2018/05/25 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
OpenCV HSV颜色识别及HSV基本颜色分量范围
2019/03/22 Python
Python如何使用正则表达式爬取京东商品信息
2020/06/01 Python
python如何写个俄罗斯方块
2020/11/06 Python
英国领先的在线药房:Pharmacy First
2017/09/10 全球购物
size?爱尔兰官方网站:英国伦敦的球鞋精品店
2019/03/31 全球购物
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
中专生的个人自我评价
2013/12/11 职场文书
党员公开承诺书内容
2014/05/20 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
建国大业电影观后感
2015/06/01 职场文书
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技