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中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
jQuery实现带3D切割效果的轮播图功能示例【附源码下载】
Apr 04 jQuery
javascript异步处理与Jquery deferred对象用法总结
Jun 04 jQuery
JavaScript实现的滚动公告特效【基于jQuery】
Jul 10 jQuery
jquery实现进度条状态展示
Mar 26 jQuery
jQuery实现飞机大战小游戏
Jul 05 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伪静态页面函数附使用方法
2008/06/20 PHP
eAccelerator的安装与使用详解
2013/06/13 PHP
php广告加载类用法实例
2014/09/23 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
php实现微信分享朋友链接功能
2019/02/18 PHP
php使用filter_var函数判断邮箱,url,ip格式示例
2019/07/06 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
javascript中[]和{}对象使用介绍
2013/03/20 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
用js制作淘宝放大镜效果
2020/10/28 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
node跨域请求方法小结
2017/08/25 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
微信小程序定位当前城市的方法
2018/07/19 Javascript
浅谈Python基础之I/O模型
2017/05/11 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
Python3分析处理声音数据的例子
2019/08/27 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
Keras Convolution1D与Convolution2D区别说明
2020/05/22 Python
Python延迟绑定问题原理及解决方案
2020/08/04 Python
Python descriptor(描述符)的实现
2020/11/15 Python
pandas针对excel处理的实现
2021/01/15 Python
地球上最先进的胡子和头发修剪器:Bevel
2018/01/23 全球购物
英国休闲奢华的缩影:Crew Clothing
2019/05/05 全球购物
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
管理信息系学生的自我评价
2014/01/11 职场文书
五年级科学教学反思
2014/02/05 职场文书
超越自我演讲稿
2014/05/21 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
mysql数据库入门第一步之创建表
2021/05/14 MySQL