前兩天遇到一個需求，需要獲取復選框選中行的數據再進行數據的操作，找了幾篇文章，發現要么是獲取不了，要么是只能獲取單行，總之就是挺模糊的，不夠細致，所以就自己通過摸索實現了，現在將這個方法進行整理分享給大家。

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

?

?可以看到已經成功獲取了

? ? ? ? ? ?

?

總結

以上是生活随笔為你收集整理的关于如何获取复选框选中行的数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。