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

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

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.效果图

 

 可以看到已经成功获取了