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实现前端分页功能
Mar 23 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
详解jquery选择器的原理
Aug 01 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
jquery实现垂直手风琴菜单
Mar 04 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jQuery使用jsonp实现百度搜索的示例代码
Jul 08 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显示MySQL数据的三种方法
2008/06/05 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
php面向对象中static静态属性和静态方法的调用
2015/02/08 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
JavaScript的Cookies
2008/01/16 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
nodejs简单实现中英文翻译
2015/05/04 NodeJs
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
Python正则表达式完全指南
2017/05/25 Python
django 自定义过滤器的实现
2019/02/26 Python
python 函数中的内置函数及用法详解
2019/07/02 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
python对XML文件的操作实现代码
2020/03/27 Python
Python 远程开关机的方法
2020/11/18 Python
python解包概念及实例
2021/02/17 Python
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
JAVA程序员自荐书
2014/01/30 职场文书
幼儿园教学随笔感言
2014/02/23 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
python微信智能AI机器人实现多种支付方式
2022/04/12 Python