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

2013-11-20  来源:本站原创  分类:jquery  人气:7 

虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下次再使用的到时候,会让你如鱼得水,提高开发效率

以下列出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());
      }
    });
}
相关文章
  • jQuery操作表格(table)的常用方法.技巧汇总 2013-11-20

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下次再使用的到时候,会让你如鱼得水,提高开发效率 以下列出13个jQuery操作table常用到的功能: 1.鼠标移动行变色 $('#table1 tr').hover(function(){ $(this).children('td').addClass('hover') }, function()

  • 超级简单的jquery操作表格方法 2015-05-01

    这篇文章主要介绍了超级简单的jquery操作表格方法,可实现针对表格行与列的增加及删除操作,是非常实用的技巧,需要的朋友可以参考下 本文实例讲述了超级简单的jquery操作表格方法.分享给大家供大家参考.具体实现方法如下: 利用jquery给指定的table添加一行.删除一行 <script language="javascript" src="./jquery.js"></script> <table border="1px

  • JQuery 操作/获取table具体代码 2014-06-29

    table在使用中比较广泛,下面与大家分享下JQuery操作/获取table的基本方法,感兴趣的朋友可以参考下哈 //nav_box 表格名称 $("#nav_box tr").each(function (i) { //var text = $(this).children("td:first").text(); //var proid = $(this).find("input:hidden").val(); //alert("pr

  • jQuery 选择表格(table)里的行和列及改变简单样式 2014-10-20

    本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助 jQuery对表格(table)的处理提供了相当强大的功能,比如说对表格特定行(row)或列(column)进行排序.样式改变等等.如果你的英文够好,你可以读读这篇文章:jQuery table manipulation.本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助. 比如我们

  • jquery 操作css样式.位置.尺寸方法汇总 2014-10-10

    本文总结了一些jQuery操作CSS样式.位置.尺寸的方法,非常的全面,非常细致,推荐给有需要的小伙伴. 一.CSS 1.css(name) 访问第一个匹配元素的样式属性. 返回值 String 参数 name (String) : 要访问的属性名称 示例: $("p").css("color"); //取得第一个段落的color样式属性的值 2.css(properties) 把一个"名/值对"对象设置为所有匹配元素的样式属性.这是一种在所有匹

  • jquery 操作表格实现代码(多种操作打包) 2014-01-08

    最近做东西需要对表格进行操作,用到的动作包括:添加一行数据.删除一行数据.上下移动数据,网上找了很多,但是不能完全满足我的需求,自己琢磨了下,搞了个这个东东 650) this.width=650;" border=0> 650) this.width=650;" border=0> 代码很简单,在附件中,各位可以下载后直接运行. <script type="text/javascript" language="javascript&qu

  • JQuery操作表格(隔行着色,高亮显示,筛选数据) 2014-02-13

    最近项目里对表格的操作比较多.以往我们要做一些效果的时候往往通过程序代码来实现,这个努力不值,因为JQuery是完全可以做到的,并且是客户端运行,不经过服务器处理,给用户的反应快,也减少了服务器压力 查了些资料,写了4个Demo: 1. 隔行着色 $('#table1 tr:odd').addClass('odd'); $('#table1 tr:even').addClass('even'); 效果: 2. 高亮含有特定数据的行 http://demo.jb51.net/js/2012/JQu

  • jQuery实现表格颜色交替显示的方法 2014-01-20

    这篇文章主要介绍了jQuery实现表格颜色交替显示的方法,涉及jQuery操作表格样式的技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了jQuery实现表格颜色交替显示的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&qu

  • JavaScript DOM操作表格及样式 2014-08-14

    这篇文章主要介绍了JavaScript DOM操作表格及样式,需要的朋友可以参考下 一 操作表格 <table>标签是HTML中结构最为复杂的一个,我们可以通过DOM来创建生成它,或者HTMLDOM来操作它; // 使用DOM来创建表格; var table = document.createElement('table'); table.border = 1; table.width = 300; var caption = document.createElement('caption')

  • JQuery对表格进行操作的常用技巧总结 2015-05-01

    这篇文章主要介绍了JQuery对表格进行操作的常用技巧,需要的朋友可以参考下 1.表格奇数行和偶数行分别添加样式 $(function(){ $('tr:odd').addClass("odd"); $('tr:even').addClass("even"); }); 不算表的头部 复制代码 代码如下: $(function(){ $('tbody>tr:odd').addClass("odd"); $('tbody>tr:even'

  • jquery操作select方法汇总 2013-10-05

    这篇文章主要介绍了jquery操作select方法,实例汇总了jQuery操作select的读取.设置.添加及删除等技巧,需要的朋友可以参考下 本文实例汇总了jquery操作select的方法.分享给大家供大家参考.具体如下: jQuery获取Select选择的Text和Value: 语法解释: $("#select_id").change(function(){//code...});//为Select添加事件,当选择其中一项时触发 var checkText=$("#se

  • jquery操作复选框checkbox的方法汇总 2014-03-06

    这篇文章主要介绍了jquery操作复选框checkbox的方法,实例汇总了jQuery针对checkbox进行判断与赋值的各种常用操作技巧,需要的朋友可以参考下 本文实例汇总了jquery操作复选框checkbox的方法.分享给大家供大家参考.具体分析如下: jquery判断checked的三种方法: $("input").attr("checked"); //版本1.6+返回:"checked"或"undefined" ,1

  • jquery操作复选框(checkbox)的12个小技巧总结 2013-12-28

    本篇文章主要是对jquery操作复选框(checkbox)的12个小技巧进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val() 或者 $("input:[type='checkbox']:checked").val(); 或者 $("input:[name='ck']:checked").val(); 2. 获取多个checkb

  • JS 模态对话框和非模态对话框操作技巧汇总 2014-02-14

    模态窗口javascript 技巧包括传值.打开.刷新以及相关实例学习,感兴趣的朋友可以参考下哈 模态窗口 javascript 技巧汇总(传值.打开.刷新) 1.要弹出的页面中,一定要保证<head></head>标签间有<base target="_self">,否则会弹出的模态窗口上,点击按钮时,会再次弹出一个新页面. 2.被弹出页面的按钮的事件处理中,应该有Response.Write(new Function().ClosePage());

  • 基于jQuery的表格操作插件 2014-06-17

    table表格由于它的浏览器兼容性和复杂的标签嵌套方式,可以算是添加样式最困难的对象之一了. 大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式.但是我们在日常应用中仍然要用到table表格,其中最好的例子就是对照表.今天彬Go将向大家推荐15个jQuery表格插件让你对数据表格进行显示.排序.筛选和操控.如jQuery表格排序插件.jQuery表格拖拽插件.jQuery树形表格插件.设置颜色.点击.替换等效果. 1.DataTables-

  • 一个JQuery操作Table的代码分享 2014-10-12

    一个JQuery操作Table的代码分享,需要的朋友可以参考下 一.数据准备 <table id="table1"> <tr><th>文章标题</th><th>文章分类</th><th>发布时间</th><th>操作</th></tr> <tr><td>测试</td><td>测试</td><

  • jquery实现表格本地排序的方法 2013-11-10

    这篇文章主要介绍了jquery实现表格本地排序的方法,实例分析了jQuery操作数组实现本地表格排序的技巧,需要的朋友可以参考下 本文实例讲述了jquery实现表格本地排序的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>jquery 表格排序</title> <sty

  • jQuery操作JSON的CRUD用法实例 2015-03-16

    这篇文章主要介绍了jQuery操作JSON的CRUD用法,实例分析了jQuery进行CURD的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jQuery操作JSON的CRUD用法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional

  • Java性能优化技巧汇总 2013-11-16

    这篇文章主要介绍了Java性能优化技巧,汇总了提升java程序性能的常用技巧,非常具有实用价值,需要的朋友可以参考下 本文实例汇总了Java性能优化技巧.分享给大家供大家参考.具体分析如下: 这里参考了些书籍,网络资源整理出来,适合于大多数Java应用 在JAVA程序中,性能问题的大部分原因并不在于JAVA语言,而是程序本身.养成良好的编码习惯非常重要,能够显著地提升程序性能. 1.尽量使用final修饰符. 带有final修饰符的类是不可派生的.在JAVA核心API中,有许多应用final的例

  • javascript基于jQuery的表格悬停变色/恢复,表格点击变色/恢复,点击行选Checkbox 2013-11-19

    jQuery的表格悬停变色 恢复,表格点击变色/恢复,点击行选Checkbox // 版本: 1.0 // 日期: 2007/08/01 // 备注: 需要jQuery库 // 参考: Dodo(tableRowCheckboxToggle) 和 softcomplex(tigra_tables) function Kin_Tables( Kin_Table_GetTableMethod, //得到Table的方法 同$()功能 必选参数 Kin_Table_Header_Offset, //从