前端:js根据CheckBox获得选中行的具体某些列内容(批量操作传多条数据)

简介: 前端:js根据CheckBox获得选中行的具体某些列内容(批量操作传多条数据)

一下业务需求,就是我需要实现批量操作,比如批量删除,我不仅需要该行的id还需要选定行中其他列的值作为参数执行批量删除操作,半吊子前端选手又开启了摸索之路。


下面直接看简化版前端代码展示吧


html页面(获取选中的name为id的复选框所在行数据):

<tr>
  <td style="text-align:center">
    <input type="checkbox" name="id" value="{{id}}" />
  </td>
  <td style="text-align:center"><span>{{name}}</span></td>
  <td style="text-align:center"><span>{{age}}</span></td>
  <td style="text-align:center"><span>{{title}}</span></td>
</tr>

js中的内容

$scope.deleteGroups = function(){
  let data = [];
  //将选中的复选框内容放进data数据
    $("input[name='id']:checked").each(function (i) {
      //获取该行第二列(eq(2))的数据,注意这里的第二列数据是上面html中的age
      //如果还要获得其他列数据,就多造几个数组填充对应数据即可
      let val = $(this).parents("tr").find('td').eq(2).text();
      //放进data数组
      data.push($.trim(val));
    });
    //这里可以通过打印data数组看到效果
    console.log(data);
}

这样就可以操作成功,由于数据安全问题就不上截图了,如有疑问,可以留言交流(来自前端渣渣)。

下班下班!

目录
相关文章
|
19天前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
40 5
|
1月前
|
JavaScript 前端开发 Java
纯前端JS实现人脸识别眨眨眼张张嘴案例
纯前端JS实现人脸识别眨眨眼张张嘴案例
48 0
|
1月前
|
JSON JavaScript 前端开发
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
40 0
|
1月前
|
JavaScript 前端开发
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
|
8天前
|
存储 缓存 前端开发
前端如何利用indexDB进行数据优化
使用IndexedDB作为浏览器内置的客户端数据库,用于存储大量数据和实现离线支持。它能缓存常用数据,减少服务器请求,提高用户体验。IndexedDB支持数据索引、复杂查询及版本管理,允许离线操作并同步到服务器。但需熟悉其异步API,可借助Dexie.js、localForage等库简化使用。
|
16天前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
|
22天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
30天前
|
JavaScript 前端开发 算法
深入探讨前端框架Vue.js中的虚拟DOM机制
本文将深入探讨前端框架Vue.js中的虚拟DOM机制,分析其原理、优势以及在实际开发中的应用场景,帮助读者更好地理解Vue.js框架的核心特性。
|
1月前
|
JSON JavaScript 前端开发
Node.js:前端开发的后端利器
Node.js作为一种运行在服务器端的JavaScript环境,为前端开发者打开了后端开发的大门。它以其高效的事件驱动、非阻塞I/O模型以及强大的npm生态,使得前端开发者能够轻松构建服务器端应用,实现前后端的全栈开发。本文将探讨Node.js的核心优势、应用场景以及在前端开发中的重要性。
|
1月前
|
前端开发 JavaScript 数据可视化
JavaScript:前端开发的灵魂与动力
JavaScript(JS)作为前端开发的核心语言,赋予了网页交互性和动态性。通过JS,开发者可以实现复杂的用户交互、数据操作以及动画效果,为用户带来丰富而流畅的网页体验。本文将介绍JS的基本概念、应用场景以及在前端开发中的重要性。