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插件FusionWidgets实现的Bulb图效果示例【附demo源码下载】
Mar 23 jQuery
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 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
使用swoole扩展php websocket示例
2014/02/13 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
2010/03/08 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
JavaScript前补零操作实例
2015/03/11 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
在原生不支持的旧环境中添加兼容的Object.keys实现方法
2017/09/11 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
NodeJS简单实现WebSocket功能示例
2018/02/10 NodeJs
原生JS实现动态添加新元素、删除元素方法
2019/05/05 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
python利用正则表达式提取字符串
2016/12/08 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
Python接口开发实现步骤详解
2020/04/26 Python
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
普通院校学生的自荐信
2013/11/27 职场文书
医院检讨书范文
2014/02/01 职场文书
励志演讲稿范文
2014/04/29 职场文书
村庄环境整治方案
2014/05/15 职场文书
婚礼秀策划方案
2014/05/19 职场文书
工作推荐信模板
2015/03/25 职场文书
2016年会开场白台词
2015/06/01 职场文书
openstack云计算keystone组件工作介绍
2022/04/20 Servers