js&jquery获取指定table指定行里面的内容

Heaven helps those who help themselves
资深码农+深耕理财=财富自由
欢迎关注

js&jquery获取指定table指定行里面的内容

Created by Marydon on 2018-05-18 11:57

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>

　　页面展示

　　说明：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;
            });
        });
        
        
    });
});

 

 

 相关推荐：

• 类似文章

 

与君共勉：最实用的自律是攒钱，最养眼的自律是健身，最健康的自律是早睡，最改变气质的自律是看书，最好的自律是经济独立 。

您的一个点赞，一句留言，一次打赏，就是博主创作的动力源泉！

↓↓↓↓↓↓写的不错，对你有帮助？赏博主一口饭吧↓↓↓↓↓↓