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 相关文章推荐
各种效果的jquery ui(接口)介绍
Sep 17 Javascript
Javascript Select操作大集合
May 26 Javascript
JavaScript 基础知识 被自己遗忘的
Oct 15 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
javascript数组排序汇总
Jul 07 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
快速对接payjq的个人微信支付接口过程解析
Aug 15 Javascript
vue项目实现图片上传功能
Dec 23 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 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
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
php魔术变量用法实例详解
2014/11/13 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
js实现网页收藏功能
2015/12/17 Javascript
Angularjs全局变量被作用域监听的正确姿势
2016/02/06 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
python实现读Excel写入.txt的方法
2018/04/29 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
平面设计师的工作职责
2013/11/21 职场文书
销售人员自我评价
2014/02/01 职场文书
优秀员工推荐信
2014/05/10 职场文书
岗位明星事迹材料
2014/05/18 职场文书
铁人观后感
2015/06/16 职场文书
2019入党申请书格式
2019/06/25 职场文书
配置nginx 重定向到系统维护页面
2021/06/08 Servers
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python