关于前端:JS通过点击选择表格某一行的获取当前行的数据结尾有VUE思路

4次阅读

共计 1556 个字符，预计需要花费 4 分钟才能阅读完成。

问题一：当咱们在表格中会有以下点击按钮，而后获取该行的某列信息；

在批改按钮上设置 ο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，百度一下）

正文完