JS通過點擊/選擇表格某一行的獲取當前行的數據(結尾有VUE思路)

 

 

問題一:當我們在表格中會有以下點擊按鈕,然後獲取該行的某列信息;

 

在 修改按鈕 上設置 οnclick="edit(this)"

function edit(val){ 

        //這裏就是val,別以爲寫錯了,如果寫成this會報錯:Uncaught SyntaxError: Unexpected token 'this',這是轉過來的參數值的意思
        var value = $(val).parent().parent().find("td");

        console.log(value.eq(1).text());   //15900012520  得到第二列的數據

}

參考:這個博客的案例

   

 

問題二:當我們選擇checkbox的單選或多選框,獲取該行的某列數據

比如你要獲取選中的這行的IMEI號:

    //獲取選中那列的數據
     var checkLength = $("input:checkbox[name='checksId']:checked").length;

      //if(checkLength == 0) {
      //    alert("請至少勾選中一項需要刪除的內容!");
      //    return;
     // }

      $("input[type='checkbox']").each(function(){ //遍歷checkbox的選擇狀態
          if($(this).prop("checked")){ //如果值爲checked表明選中了
             // console.log("選中該行的IEMI:"+$(this).closest('tr').find('td').eq(7).text());
             var delei = $(this).closest('tr').find('td').eq(7).text();//獲取eq爲7的那一列數據(就是第7列)
              console.log("選中改行的列值:"+typeof delei+delei);


          }
      });

 

問題三:鼠標移到哪一行,就顯示哪一行的某列內容;

略!沒做過,可個人思路是:類似上面,先定義鼠標移到該行的操作,如:hover,然後才定義一個獲取方法(前面用的的是onclick);

 

總結:獲取每行的某列數據,列出常用幾條(用JS或者JQ都沒有區別):

(1) var value = $(this1).parent().parent().find("td").eq(1).text();//獲得該行的第二列數據

(2) var value = $(this).closest('tr').find('td').eq(7).text();//獲取eq爲7的那一列數據(就是第7列)

(3)var value = $(this).children().eq(1).text();//所點擊的一行的第二個td內容

(4)var value = $(this).find("td").eq(1).html();

 

最後.text()和.html()獲得文本信息和頁面信息,記得自己要獲得的是什麼?可以嘗試下,

parent和closest和children這個分別是父元素和祖先元素和子元素,find是查找他們的父元素的意思

 

可以取一反三!

 

擴展簡單說明:

VUE實現就更簡單咯!首先VUE需要綁定 @selection-change="handleSelectionChange",就是要獲取表格行的內容

 handleSelectionChange(selection) {
            this.checkedList = selection;
            this.$emit("selection-change", this.checkedList);

        },  

你在點擊按鈕事件,加上ROW該行內容,也就是你點擊哪行就獲取哪行的內容,如:editClick(row) {}

把獲取的內容保存起來,如果彈出的diglog窗口,那就把這些值傳過去;(父子類相互傳值的VUE方法:prop、emit,百度一下)

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章