js&jquery获取指定table指定行里面的内容
2018-05-18 11:57
746 查看
js&jquery获取指定table指定行里面的内容
CreateTime--2018年5月18日11:46:04
Author:Marydon
1.展示
代码展示
<table style="border:0;"> <tr><td style="border:0;">test</td></tr> </table> <table> <tr> <td>第一行第一列</td> <td>第一行第二列</td> <td>第一行第三列</td> <td>第一行第四列</td> </tr> <tr> <td>第二行第一列</td> <td><input type="text" value="2-1"/></td> <td><input type="text" value="2-2"/></td> <td><input type="text" value="2-3"/></td> </tr> <tr> <td>第三行第一列</td> <td><input type="text" value="3-1"/></td> <td><input type="text" value="3-2"/></td> <td><input type="text" value="3-3"/></td> </tr> </table>View Code
页面展示
说明:test也是一个table
2.实现
举例:获取第二个table第二行里面所有的文本框
$(function(){ $("table:eq(1) tr:eq(1) input:text").each(function(){ console.log($(this).val()); }); });
3.拓展
需求:
为table中的每个文本框,添加name属性;
name命名规则:该文本框所在单元格的所在行的行名称+"_"+"列名称"+"_"+列数
实现:2种方式
$(function(){ // 获取第二个table的所有行对象 var table2_rows = document.getElementsByTagName("table")[1].rows; // 获取第二个table的所有行数 var table2_rows_length = table2_rows.length; // 获取第一行所有的列数据 var table2_rows1_columns_array = []; // 获取第一行所有的列对象,注意:返回的不是一个数组 var table2_rows1_columns = table2_rows[0].cells; // 对第一行进行遍历 for (var i = 0; i < table2_rows1_columns.length; i++) { // 将该单元格的文本信息放到数据中 table2_rows1_columns_array.push(table2_rows1_columns[i].innerText); } // 当前行的第一列名称 var table2_rows_column1 = ""; // 方式一 // 去除第一行 /*for(var i= 1; i < table2_rows_length; i++) { // 错误用法:$(table2_rows[i] + " td").each(){} $(table2_rows[i]).children("td").each(function(index,tdObj) { var index_td = index; // 取当前行的第一列 if (0 == index_td) { table2_rows_column1 = $(tdObj).text(); } // 获取当前单元格内的所有文本框 $(tdObj).children(":text").each(function() { $(this)[0].name = table2_rows_column1 + "_" + table2_rows1_columns_array[index_td] + "_" + index_td; }); }); }*/ // 方式二 // 去除第一行 $("table:eq(1) tr:gt(0)").each(function(index,trObj){ // 获取当前行的所有td对象 // 错误用法:$(trObj + " td") $(trObj).children("td").each(function(index, tdObj){ var index_td = index; // 取当前行的第一列 if (0 == index_td) { table2_rows_column1 = $(tdObj).text(); } // 获取当前单元格内的所有文本框 $(tdObj).children("input:text").each(function(index, inputObj){ $(inputObj)[0].name = table2_rows_column1 + "_" + table2_rows1_columns_array[index_td] + "_" + index_td; }); }); }); });
相关推荐:
相关文章推荐
- Jquery 获取指定 table下 所有 type='text' 的 input
- js&jquery 获取select下拉框的值、文本内容、自定义属性
- 使用jquery获取table内 td里面指定类型控件的值
- jquery、js获取table,遍历输出tr中各个td的内容。
- FCK常用Js,获取FCK内容,统计FCK字数,向FCK写入指定代码
- js获取class里面的内容
- js 获取html table单元格内容,获取单元格内输入框中的内容
- js/jquery中添加 删除 获取内容方法
- jQuery -> 获取指定上下文中的DOM元素
- jQuery -> 获取/设置HTML或TEXT内容
- [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的差别:关于内容泄露问题
- jquery js获取html选中的内容
- js中获取 table节点各tr及td的内容方法
- JS与jQuery遍历Table所有单元格内容的方法
- jquery获取table,遍历输出tr中各个td的内容(转载)
- 使用phantomjs&casperjs+jsoup获取网页内容
- JS和JQuery中如何获取和修改控件显示内容(如lable,div,h1)
- jquery获取table中的某行全部td的内容方法
- jquery获取table中的某行全部td的内容方法
- 获取jQuery对象的第N个DOM元素 && table常用css样式