首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

jQuery列表动态增加和删除的实现方法

Posted in jQuery onNovember 05, 2020

通过jQuery实现列表的数据动态添加与删除

代码演示

演示地址

背景隔行换色

CSS代码

/* 设置奇数行颜色 */
.even {
 background-color: dodgerblue;
}

/* 设置偶数行背景颜色 */
.odd {
 background-color: pink;
}

JavaScript代码

// 设置奇数偶数行的背景颜色
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");

全选和取消全选事件

//设置全选和取消全选事件
$("thead th:first").append("<span id='show'></span>")
$("thead input:checkbox").click(function () {
 if ($(this).prop("checked")) {
 $("tbody input:checkbox").prop("checked", true);
 $("#show").replaceWith("<span id='show'>已全选</span>");
 } else {
 $("tbody input:checkbox").prop("checked", false);
 $("#show").replaceWith("<span id='show'>已取消全选</span>");
 }
});

删除

//给当前和未来元素添加绑定事件
$("tbody").on("click", "td>a:nth-child(2)", function () {
 if (confirm("确定要删除吗?")) {
 //取消背景颜色
 $("tr:even").removeClass("even");
 $("tr:odd").removeClass("odd");
 //移除tr
 $(this).parent().parent().remove()
 //添加背景颜色
 $("tr:even").addClass("even");
 $("tr:odd").addClass("odd");
 }
});

新增

HTML代码

<!--新增列表-->
<div>
 <form>
 <table>
  <tr>
  <td>序号</td>
  <td><input type="text"/></td>
  </tr>
  <tr>
  <td>分类名</td>
  <td><input type="text"/></td>
  </tr>
  <tr>
  <td>分类描述</td>
  <td><input type="text"/></td>
  </tr>
  <input type="reset" value="确定"/>
  <input type="reset" value="取消"/>
 </table>
 </form>
</div>

CSS代码

/*默认隐藏新增页面*/
div:nth-child(2) {
 display: none;
}

JavaScript代码

// 点击"新增"按钮显示新增列表
$("div:nth-child(1)>input:button").click(function () {
 $("div:nth-child(2)").show("slow");
});
//点击"取消"按钮隐藏div
$("div:nth-child(2) :reset:last").click(function () {
 $("div:nth-child(2)").hide("slow");
});
//点击"确定"按钮,提交表单
$("div:nth-child(2) :reset:first-child").click(function () {
 $("div:nth-child(1) tbody").append(" <tr>\n" +
 "  <td><input type=\"checkbox\"/></td>\n" +
 "  <td></td>\n" +
 "  <td></td>\n" +
 "  <td></td>\n" +
 "  <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
 " </tr>");

 // 获取文本框节点
 var textDom = $("div:nth-child(2) :text");
 // 获取td节点
 var tdDom = $("div:nth-child(1) tr:last td");
 for (var i = 0; i < textDom.length; i++) {
 //获取文本框内容
 var content = textDom.eq(i).val();
 // 把文本框获取的内容写入到td内
 tdDom.eq(i + 1).text(content);
 }
 //添加背景颜色
 $("tr:even").addClass("even");
 $("tr:odd").addClass("odd");
 $("div:nth-child(2)").hide("slow");
});

完整代码

HTML代码

<body>
<div>
 <input type="button" value="新增"/>
 <table cellpadding="0px" cellspacing="0px">
 <thead>
 <tr>
  <th><input type="checkbox"/></th>
  <th>序号</th>
  <th>分类名</th>
  <th>分类描述</th>
  <th>操作</th>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td><input type="checkbox"/></td>
  <td>1</td>
  <td>1</td>
  <td>1</td>
  <td><a href="#">修改</a> <a href="#">删除</a></td>
 </tr>
 <tr>
  <td><input type="checkbox"/></td>
  <td>2</td>
  <td>2</td>
  <td>2</td>
  <td><a href="#">修改</a> <a href="#">删除</a></td>
 </tr>
 <tr>
  <td><input type="checkbox"/></td>
  <td>3</td>
  <td>3</td>
  <td>3</td>
  <td><a href="#">修改</a> <a href="#">删除</a></td>
 </tr>
 <tr>
  <td><input type="checkbox"/></td>
  <td>4</td>
  <td>4</td>
  <td>4</td>
  <td><a href="#">修改</a> <a href="#">删除</a></td>
 </tr>
 </tbody>
 </table>
</div>

<!--新增列表-->
<div>
 <form>
 <table>
  <tr>
  <td>序号</td>
  <td><input type="text"/></td>
  </tr>
  <tr>
  <td>分类名</td>
  <td><input type="text"/></td>
  </tr>
  <tr>
  <td>分类描述</td>
  <td><input type="text"/></td>
  </tr>
  <input type="reset" value="确定"/>
  <input type="reset" value="取消"/>
 </table>
 </form>
</div>
</body>

CSS代码

table, th, td {
 border: 1px solid black;
 }

 th, td {
 width: 120px;
 height: 40px;
 line-height: 40px;
 text-align: center;
 }

 /* 设置奇数行颜色 */
 .even {
 background-color: dodgerblue;
 }

 /* 设置偶数行背景颜色 */
 .odd {
 background-color: pink;
 }

 /* 默认隐藏新增页面*/
 div:nth-child(2) {
 display: none;
 }

JavaScript代码

<script>
 $(function () {
 // 设置奇数偶数行的背景颜色
 $("tr:even").addClass("even");
 $("tr:odd").addClass("odd");

 //设置全选和取消全选事件
 $("thead th:first").append("<span id='show'></span>")
 $("thead input:checkbox").click(function () {
  if ($(this).prop("checked")) {
  $("tbody input:checkbox").prop("checked", true);
  $("#show").replaceWith("<span id='show'>已全选</span>");
  } else {
  $("tbody input:checkbox").prop("checked", false);
  $("#show").replaceWith("<span id='show'>已取消全选</span>");
  }
 });

 //新增商品
 $("div:nth-child(1)>input:button").click(function () {
  $("div:nth-child(2)").show("slow");
 });

 //"取消" 按钮
 $("div:nth-child(2) :reset:last").click(function () {
  $("div:nth-child(2)").hide("slow");
 });

 //"确定" 按钮
 $("div:nth-child(2) :reset:first-child").click(function () {
  $("div:nth-child(1) tbody").append(" <tr>\n" +
  "  <td><input type=\"checkbox\"/></td>\n" +
  "  <td></td>\n" +
  "  <td></td>\n" +
  "  <td></td>\n" +
  "  <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
  " </tr>");

  // 获取文本框节点
  var textDom = $("div:nth-child(2) :text");
  // 获取td节点
  var tdDom = $("div:nth-child(1) tr:last td");
  for (var i = 0; i < textDom.length; i++) {
  //获取文本框内容
  var content = textDom.eq(i).val();
  // 把文本框获取的内容写入到td内
  tdDom.eq(i + 1).text(content);
  }
  //添加背景颜色
  $("tr:even").addClass("even");
  $("tr:odd").addClass("odd");
  $("div:nth-child(2)").hide("slow");
 });

 //给当前和未来元素添加绑定事件
 $("tbody").on("click", "td>a:nth-child(2)", function () {
  if (confirm("确定要删除吗?")) {
  //取消背景颜色
  $("tr:even").removeClass("even");
  $("tr:odd").removeClass("odd");
  //移除tr
  $(this).parent().parent().remove()
  //添加背景颜色
  $("tr:even").addClass("even");
  $("tr:odd").addClass("odd");
  }
 });

 });
</script>

总结

到此这篇关于jQuery列表动态增加和删除实现方法的文章就介绍到这了,更多相关jQuery列表动态增加和删除内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

jQuery列表动态增加和删除的实现方法

- Author -

jiangrunkang.

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery插件之validation插件
Mar 29 jQuery
jquery实现异步加载图片（懒加载图片一种方式）
Apr 24 jQuery
浅谈struts1 &amp; jquery form 文件异步上传
May 25 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
使用jQuery实现购物车
Oct 29 #jQuery
jQuery实现简单评论区功能
Oct 26 #jQuery
jquery插件懒加载的示例
Oct 24 #jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 #jQuery
jquery实现抽奖功能
Oct 22 #jQuery
jQuery实现可以计算进制转换的计算器
Oct 19 #jQuery
jQuery实现计算器功能
Oct 19 #jQuery
SnakeGame(1) cvzone(1) 索尼ICF-36(1) 德生2P3(1) 计算机视觉(2) 贪吃蛇(2) python小游戏(5) 备份(2) mediapipe(1) 索引(8)
You might like
php数组的一些常见操作汇总
2011/07/17 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
JQuery 文本框使用小结
2010/05/22 Javascript
JavaScript 原型继承之构造函数继承
2011/08/26 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
火狐下input焦点无法重复获取问题的解决方法
2014/06/16 Javascript
javascript限制用户只能输汉字中文的方法
2014/11/20 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
全面解析node 表单的图片上传
2016/11/21 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
微信小程序 出现错误：{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
2017/02/23 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
python算法学习之计数排序实例
2013/12/18 Python
Python中类的继承代码实例
2014/10/28 Python
Python 硬币兑换问题
2019/07/29 Python
Django高并发负载均衡实现原理详解
2020/04/04 Python
解决Python安装cryptography报错问题
2020/09/03 Python
python 模块导入问题汇总
2021/02/01 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
后进基层党组织整改方案
2014/10/25 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
Python常遇到的错误和异常
2021/11/02 Python