jQuery操作表格(table)的常用方法、技巧汇总


Posted in Javascript onApril 12, 2014

以下列出13个jQuery操作table常用到的功能:

1.鼠标移动行变色

$('#table1 tr').hover(function(){
    $(this).children('td').addClass('hover')
}, function(){
    $(this).children('td').removeClass('hover')
});

方法二:
$("#table1 tr:gt(0)").hover(function() { 
    $(this).children("td").addClass("hover"); 
}, function() { 
    $(this).children("td").removeClass("hover"); 
});

2.奇偶行不同颜色

$('#table1 tbody tr:odd').css('background-color', '#bbf');
$('#table1 tbody tr:even').css('background-color','#ffc');
//操作class
$("#table1 tbody tr:odd").addClass("odd");
$("#table1 tbody tr:even").addClass("even");

3.隐藏一行
$('#table1 tbody tr:eq(3)').hide();
$("#table1 tr td::nth-child(3)").hide();
$("#table1 tr").each(function(){$("td:eq(3)",this).hide()});

4.隐藏一列
$('#table1 tr td::nth-child(3)').hide();

5.删除一行
// 删除除第一行外的所有行
$('#table1 tr:not(:first)').remove();
// 删除指定行
$('#table1 tr:eq(3)').remove();

6.删除一列
// 删除除第一列外的所有列
$('#table1 tr th:not(:nth-child(1))').remove();
$('#table1 tr td:not(:nth-child(1))').remove();
// 删除第一列
$('#table1 tr td::nth-child(1)').remove();

7.得到(设置)某个单元格的值
// 设置table1,第2个tr的第一个td的值。  
$('#table1 tr:eq(1) td:nth-child(1)').html('value'); 
// 获取table1,第2个tr的第一个td的值。
$('#table1 tr:eq(1) td:nth-child(1)').html();

8.插入一行
// 在第二个tr后插入一行
$('<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>').insertAfter($('#table7 tr:eq(1)'));

9.获取每一行指定的单元格的值
var arr = [];
$('#table1 tr td:nth-child(1)').each(function (key, value) {
   arr.push($(this).html());
});
var result = arr.join(',');

10.全选或全不选
//方法零:
$('#all').on('click', function () {
    $('input.checkSub').prop('checked', this.checked); // 给当前一起绑定的子选择添加效果
});
//方法一:
//全选或全不选 此传入的参数为event 如:checkAll(event)
function checkAll(evt){
 evt=evt?evt:window.event;
 var chall=evt.target?evt.target:evt.srcElement;
 var tbl=$("#table1");
 var trlist=tbl.find("tr");
 for(var i=1;i<trlist.length;i++){
  var tr=$(trlist[i]);
  var input=tr.find("INPUT[type='checkbox']");
  input.attr("checked",chall.checked);
 }
}
//方法二:
//全选或全不选 此传入的参数为this 如:checkAll(this)
function checkAll(evt){
 var tbl=$("#table1");
 var trlist=tbl.find("tr");
 for(var i=1;i<trlist.length;i++){
  var tr=$(trlist[i]);
  var input=tr.find("INPUT[type='checkbox']");
  input.attr("checked",evt.checked);
 }
}
//方法三:
//全选或全不选 此传入的参数为this 如:checkAll(this)
function checkAll(evt){
    $("#table1 tr").find("input[type='checkbox']").each(function(i){
     $(this).attr("checked",evt.checked)
    });
}
//方法四:
//全选或全不选 此传入的参数为this 如:checkAll(this)
function checkAll(evt){
    $("#table1 tr").find("input[type='checkbox']").attr("checked",evt.checked);
}

11.客户端动态添加行
function btnAddRow(){
    //行号是从0开始,最后一行是新增、删除、保存按钮行 故减去2
    var rownum=$("#table1 tr").length-2;
    var chk="<input type='checkbox' id='chk_"+rownum+"' name='chk_"+rownum+"'/>";
    var text="<input type='text' id='txt_"+rownum+"' name='txt_"+rownum+"' width='75px'/>";
    var sel="<select id='sel_"+rownum+"'><option value='1'>男</option><option value='0'>女</option></select>";
    var row="<tr><td>"+chk+"</td><td>"+text+"</td><td>"+sel+"</td><td>"+text+"</td><td>"+text+"</td></tr>";
    $(row).insertAfter($("#table1 tr:eq("+rownum+")"));   
}

12.客户端删除一行
每次只能删除一行,删除多行时出错
function btnDeleteRow(){
   $("#table1 tr").find("input[type='checkbox']").each(function(i){
    if($(this).attr("checked")){ 
     if(i!=0){//不能删除行标题       
     $("#table1 tr:eq("+i+")").remove();
     }
    }
   });
}
这个比上面的要好,可以一下删除多个记录
function btnDeleteRow(){
   $("#table1 tr").each(function(i){
       var chk=$(this).find("input[type='checkbox']");
       if(chk.attr("id")!="checkall"){//不能删除标题行       
     if(chk.attr("checked")){
     $(this).remove();
     }
       }
    });
}

13.客户端保存
function btnSaveClick(){
   //find()方法中我暂时不知道如何设定多个筛选条件,所以下面得不到select列表的值
   //$("#table1 tr td").find("input[type='text']" || "select").each(function(i){
   //alert($(this).val());
   //});             
   $("#table1 tr").find("td").each(function(i){
      if($(this).find("input[type='text']").length>0){
          alert($(this).find("input[type='text']").val());
      }else if($(this).find("select").length>0)
      {
          alert($(this).find("select").val());
      }
    });
}
Javascript 相关文章推荐
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
JS控制HTML元素的显示和隐藏的两种方法
Sep 27 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
bootstrap模态框远程示例代码分享
May 22 Javascript
基于Node.js搭建hexo博客过程详解
Jun 25 Javascript
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 #Javascript
javascript对JSON数据排序的3个例子
Apr 12 #Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 #Javascript
JS判断客户端是手机还是PC的2个代码
Apr 12 #Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 #Javascript
jQuery中阻止冒泡事件的方法介绍
Apr 12 #Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 #Javascript
You might like
数字转英文
2006/12/06 PHP
php中截取字符串支持utf-8
2007/01/18 PHP
php漏洞之跨网站请求伪造与防止伪造方法
2013/08/15 PHP
php+mysql实现数据库随机重排实例
2014/10/17 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
PHP通过微信跳转的Code参数获取用户的openid(关键代码)
2016/07/06 PHP
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
文字不间断滚动(上下左右)实例代码
2013/04/21 Javascript
jQuery 鼠标经过(hover)事件的延时处理示例
2014/04/14 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
node微信开发之获取access_token+自定义菜单
2019/03/17 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
vue自定义正在加载动画的例子
2019/11/14 Javascript
python+mysql实现简单的web程序
2014/09/11 Python
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
Sanic框架蓝图用法实例分析
2018/07/17 Python
QT5 Designer 打不开的问题及解决方法
2020/08/20 Python
目前不被任何主流浏览器支持的CSS3属性汇总
2014/07/21 HTML / CSS
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
Why do we need Unit test
2013/01/03 面试题
JAVA招聘远程笔试题
2015/07/23 面试题
教师求职推荐信范文
2013/11/20 职场文书
会计系个人求职信范文分享
2013/12/20 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
行政介绍信范文
2015/05/04 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
Oracle用户管理及赋权
2022/04/24 Oracle
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript