zoukankan      html  css  js  c++  java
  • js&jquery获取指定table指定行里面的内容

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

    CreateTime--2018年5月18日11:46:04

    Author:Marydon

    1.展示

      代码展示

     1 <table style="border:0;">
     2     <tr><td style="border:0;">test</td></tr>
     3 </table>
     4 <table>
     5     <tr>
     6         <td>第一行第一列</td>
     7         <td>第一行第二列</td>
     8         <td>第一行第三列</td>
     9         <td>第一行第四列</td>
    10     </tr>
    11     <tr>
    12         <td>第二行第一列</td>
    13         <td><input type="text" value="2-1"/></td>
    14         <td><input type="text" value="2-2"/></td>
    15         <td><input type="text" value="2-3"/></td>
    16     </tr>
    17     <tr>
    18         <td>第三行第一列</td>
    19         <td><input type="text" value="3-1"/></td>
    20         <td><input type="text" value="3-2"/></td>
    21         <td><input type="text" value="3-3"/></td>
    22     </tr>
    23 </table>
    View Code

      页面展示

      说明:test也是一个table

    2.实现

      举例:获取第二个table第二行里面所有的文本框

    1 $(function(){
    2     $("table:eq(1) tr:eq(1) input:text").each(function(){
    3         console.log($(this).val());
    4     });
    5 });

    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;
                });
            });
            
            
        });
    });

     相关推荐:

  • 相关阅读:
    使用bottle进行web开发(2):http request
    使用bottle进行web开发(1):hello world
    python modules
    python的class的__str__和__repr__(转)
    functools模块方法学习(1):partial
    bottle框架学习(2):变量定义等
    VisualSVN_Server安装_配置图文教程
    管理的艺术--达尔文进化论:适者生存 末位淘汰
    LINUX怎么修改IP地址
    Cent OS 命令行和窗口界面默认登录切换方法
  • 原文地址:https://www.cnblogs.com/Marydon20170307/p/9055560.html
Copyright © 2011-2022 走看看