关于如何获取复选框选中行的数据

前两天遇到一个需求，需要获取复选框选中行的数据再进行数据的操作，找了几篇文章，发现要么是获取不了，要么是只能获取单行，总之就是挺模糊的，不够细致，所以就自己通过摸索实现了，现在将这个方法进行整理分享给大家。

1.首先给大家看的是我的html代码，我是用js动态生成的，本质上和页面上写的是一样的,注意该方法需要给复选框(input)加上name属性

var tbody = ' <tr class="text-center" href="' + rem.Data[i].Href + '">'
+ '<td class="text-center" name="href" href="' + rem.Data[i].Href + '">'
+ '<input type="checkbox" name="checkbox"></td>'
+ '<td class="hidden-xs font-500" name="resourcesName">' + rem.Data[i].ResourcesName + '</td>'
+ '<td class="visible-lg text-muted" name="type"> '+ rem.Data[i].Type+'</td>'
+ '<td class="visible-lg text-muted">' + rem.Data[i].UName +'</td>'
+ ' <td class="visible-lg text-muted">'
+ '<em>'+rem.Data[i].FileSize+"M"+'</em>'
+ '</td>'
+ ' </tr>'
$("#tbody").append(tbody)

2.接下来是我的js代码，这个方法也可以获取到标签自定义属性的值

//获取被选中的复选框（要定义input的name才能获取）
var checked = $("input[name=checkbox]:checked");

//循环被选中复选框的长度
for (i = 0; i < checked.length; i++) {
//创建一个对象
var obj = {};

//获取复选框选中的总行数里的i行
var row = $("input[name=checkbox]:checked").parent("td").parent("tr")[i];

//children获取的是子元素 []指要获取的第几个子元素 innerHTML取其html文本

obj["ResourcesName"] = row.children[1].innerHTML;

obj["Type"] = row.children[2].innerHTML;

obj["Href"] = row.getAttribute("href"); //获取自定义属性的值

console.log(row.children[1].innerHTML, row.children[2].innerHTML, row.getAttribute("href"))

//将对象存进数组
array[i] = obj;
}

console.log(array);

3.效果图

可以看到已经成功获取了

关于如何获取复选框选中行的数据相关推荐

d3.js实现力导向图圈选框选
#d3.js实现力导向图圈选框选今天给大家带来的是如何在2D可视化图形中加入通过鼠标拖动圈选功能,以力导向图为例. ##最终效果 demo跳转 ##代码解析我们是要在节点的上方绘制一个矩形覆盖节点 ...
html+单选+回显,VUE+elementUI表格多选框实现单选以及数据回显时toggleRowSelection失效问题...
一.多选框单选 > @select-all="onSelectAll" 全选是触发的事件 @selection-change="selectItem" 单 ...
c# 复选框打勾返回数据问题
JQuery插件之-----Datatables(三)Datatables实现多选框与AJAX返回数据
通过Eclipse创建一个简单的Spring MVC项目,使用其内置的JSON转换在index.jsp文件中添加如下内容: <%@ page language="java" ...
layui复选框怎么取值_layui如何获取checkbox复选框的值
layui如何获取checkbox复选框的值发布时间:2020-10-21 17:07:09 来源:亿速云阅读:164 作者:Leah 本篇文章给大家分享的是有关layui如何获取checkbox ...
layui复选框怎么取值_layui获取checkbox复选框值
获取layui表单复选框已选中的数据 HTML layui.form.checkbox 获取选中复选框开关关开关开立即提交 JS layui.use('form', function(){ v ...
bootstrap table固定列导致复选框失效的解决方法
//获取选中多行数据 function getSelectedRow_st() {//解決固定列导致选择复选框选不中的问题//首先判断表格是否为固定列表格,使用bootstrapTable('getO ...
bootstrapTable:获取选中行的数据
必须要有checkbox:true和singleSelect:true,然后就可以通过var row=$("#mytab").bootstrapTable('getSelectio ...
php兴趣爱好复选框如何取值,php checkbox 取值详细说明
php checkbox 取值详细说明发布于 2014-12-12 18:18:58 | 176 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertext ...

关于如何获取复选框选中行的数据

关于如何获取复选框选中行的数据相关推荐

最新文章

热门文章