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>

　　頁面展示

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

 

 

 相關推薦：

• 類似文章