问题一:当咱们在表格中会有如下点击按钮,而后获取该行的某列信息;html
在 修改按钮 上设置 οnclick="edit(this)"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的单选或多选框,获取该行的某列数据code
好比你要获取选中的这行的IMEI号:htm
//获取选中那列的数据 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); } });
问题三:鼠标移到哪一行,就显示哪一行的某列内容;token
略!没作过,可我的思路是:相似上面,先定义鼠标移到该行的操做,如:hover,而后才定义一个获取方法(前面用的的是onclick);事件
总结:获取每行的某列数据,列出经常使用几条(用JS或者JQ都没有区别):input
(1) var value = $(this1).parent().parent().find("td").eq(1).text();//得到该行的第二列数据it
(2) var value = $(this).closest('tr').find('td').eq(7).text();//获取eq为7的那一列数据(就是第7列)io
(3)var value = $(this).children().eq(1).text();//所点击的一行的第二个td内容console
(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,百度一下)