码迷,mamicode.com
首页 > 其他好文 > 详细

选中并获取表格中的数据

时间:2016-07-11 21:20:17      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:

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

 

 

 

 

这是自己学习过程中的记录,方便自己回顾,好记性不如烂笔头

作者:艺至

 

选中并获取表格中的数据

标签:

原文地址:http://www.cnblogs.com/sunjiguang/p/5661507.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!