JS通过点击/选择表格某一行的获取当前行的数据（结尾有VUE思路） |
您所在的位置：网站首页 › 表格怎么选中一行内容 › JS通过点击/选择表格某一行的获取当前行的数据（结尾有VUE思路） |
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，百度一下） |
【本文地址】
今日新闻 |
推荐新闻 |