zoukankan      html  css  js  c++  java
  • 选中并获取表格中的数据

    1. 对于循环出来的表格,我们需要获取表格的数据,不使用id 。

    表格:

    <table class="table" id="userTable">
       <thead>
         <tr>
           <th>表格标题</th>
           <th>表格标题</th>
           <th>表格标题</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td> <input type="text" value="2222"> </td>
           <td>表格单元格</td>
           <td>表格单元格</td>
         </tr>
       </tbody>
     </table>

    2.  当选中时候,被选中的变色,再次点击就会反选(主要添加class属性)

        (1)表格数据多选

    window.onload = function(){
    
    
            $('#userTable tbody').on( 'click', 'tr', function () {
                if ( $(this).hasClass('selected') ) {
                    $(this).removeClass('selected');
                    $(this).css("background-color","")
                }
                else {
                    $(this).addClass('selected');
                    $(this).css("background-color","grey")
                }
            });
    
        }

        (2) 表格数据单选

    /*
     * 单选实在多选的基础上 在else中加上这两句
     * */
    $('#userTable tr.selected').css("background-color","");
    $('#userTable tr.selected').removeClass('selected');

    3. 获取已选中的数据

      (1)获取td里的数据

         
    //定义数组接收
    var list = []; $('#userTable tbody tr.selected').each(function(){ // 获取当前一行中第一列的里的数据 list.push($(this).find('td').eq(0).html()) })

       (2)获取td里面input 标签的值

    var list = [];
            $('#userTable tbody tr.selected').each(function(){
                //获取当前行的第一列子标签里的值(即input标签的值)
                list.push($(this).find('td').eq(0).children().val())
            })

    ---------------------------------------------------------------------阿纪----------------------------------------------------------------------

  • 相关阅读:
    eclipse中,把java函数代码折叠/展开 介绍【转】
    苹果开发者账号注册&真机调试
    Objective-C编码规范:26个方面解决iOS开发问题
    iTunes获取下载的安装包
    Mac AppStore下载文件的获取
    Mac 切换Windows 使用虚拟机, 不推荐双系统
    Xcode使用版本
    如何提高代码质量
    ARC的内存管理
    Objective-C 类的继承、方法的重写和重载
  • 原文地址:https://www.cnblogs.com/sunjiguang/p/5661507.html
Copyright © 2011-2022 走看看