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,百度一下)

 

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