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数组操作总结和属性、方法介绍
Apr 05 Javascript
js监听鼠标事件控制textarea输入字符串的个数
Sep 29 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
javascript表单事件处理方法详解
May 15 Javascript
jQuery操作动态生成的内容的方法
May 28 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
AngularJS过滤器详解及示例代码
Aug 16 Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 Javascript
Bootstrap Table中的多选框删除功能
Jul 15 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 Javascript
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
推荐php模板技术[转]
2007/01/04 PHP
Symfony2实现从数据库获取数据的方法小结
2016/03/18 PHP
php中this关键字用法分析
2016/12/07 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
JavaScript类和继承 constructor属性
2010/03/04 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
jQuery中on()方法用法实例
2015/01/19 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
vue实现文字加密功能
2019/09/27 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
[02:07]DOTA2新英雄展现中国元素,完美“圣典”亮相央视
2016/12/19 DOTA
python单元测试unittest实例详解
2015/05/11 Python
python函数形参用法实例分析
2015/08/04 Python
Golang与python线程详解及简单实例
2017/04/27 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
python实现马丁策略的实例详解
2021/01/15 Python
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
2014年重阳节敬老活动方案
2014/09/16 职场文书
2014年医务科工作总结
2014/12/18 职场文书
大学生英文求职信范文
2015/03/19 职场文书
关于童年的读书笔记
2015/06/26 职场文书
调解协议书范本
2016/03/21 职场文书