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使用unlock.js插件实现滑动解锁
Apr 04 jQuery
Jquery获取radio选中的值
May 05 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery代码优化方法总结
Jan 29 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 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 前加at符合@的作用解析
2015/07/31 PHP
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
使用bootstrapValidator插件进行动态添加表单元素并校验
2016/09/28 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
基于JavaScript实现瀑布流布局
2018/08/15 Javascript
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
用Python遍历C盘dll文件的方法
2015/05/06 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
Django时区详解
2019/07/24 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
pycharm通过anaconda安装pyqt5的教程
2020/03/24 Python
python Gabor滤波器讲解
2020/10/26 Python
移动端rem布局的两种实现方法
2018/01/03 HTML / CSS
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
手术室护士自我鉴定
2013/10/14 职场文书
毕业生就业意向书
2014/04/01 职场文书
员工薪酬激励方案
2014/06/13 职场文书
社区班子对照检查材料
2014/08/27 职场文书
化工实习心得体会
2014/09/09 职场文书
不尊敬老师检讨书范文
2014/11/19 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
七年级地理教学计划
2015/01/22 职场文书
学校施工安全责任书
2015/01/29 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
安全教育片观后感
2015/06/17 职场文书
如何才能写好调研报告?
2019/07/03 职场文书
win10安装配置nginx的过程
2021/03/31 Servers
python如何进行基准测试
2021/04/26 Python
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL