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 相关文章推荐
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
菜鸟学习JavaScript小实验之函数引用
Nov 17 Javascript
Javascript中找到子元素在父元素内相对位置的代码
Jul 21 Javascript
jQuery中ready事件用法实例
Jan 19 Javascript
javascript显式类型转换实例分析
Apr 25 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
Sep 14 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
利用yarn实现一个webpack+react种子
Oct 25 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
js实现橱窗展示效果
Jan 11 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 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设计模式中单例模式的应用分析
2013/05/15 PHP
php检查字符串中是否有外链的方法
2015/07/29 PHP
thinkPHP下ueditor的使用方法详解
2015/12/26 PHP
javascript 用原型继承来实现对象系统
2010/03/22 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
vux uploader 图片上传组件的安装使用方法
2018/05/15 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
jQuery实现朋友圈查看图片
2020/09/11 jQuery
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
跟老齐学Python之总结参数的传递
2014/10/10 Python
tensorflow更改变量的值实例
2018/07/30 Python
python实现京东秒杀功能
2018/07/30 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
python中常用的数据结构介绍
2021/01/12 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
欧洲、亚洲、非洲和拉丁美洲的度假套餐:Great Value Vacations
2019/03/30 全球购物
自动化系在校本科生求职信
2013/10/23 职场文书
应征英语教师求职信
2013/11/27 职场文书
初中生期末评语大全
2014/04/24 职场文书
2014年重阳节老干部座谈会局领导发言稿
2014/09/25 职场文书
临时用工协议书范本
2014/10/29 职场文书
小学思品教学反思
2016/02/20 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
Java集成swagger文档组件
2021/06/28 Java/Android
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android