JQuery对表格进行操作的常用技巧总结_jquery

1、表格奇数行和偶数行分别添加样式

复制代码 代码如下:

$(function(){
$('tr:odd').addClass("odd");
$('tr:even').addClass("even");
});

不算表的头部

复制代码 代码如下:

$(function(){
$('tbody>tr:odd').addClass("odd");
$('tbody>tr:even').addClass("even");
});

2、单选框控制行的高亮显示

复制代码 代码如下:

$('tobdy>tr').click(function(){
$(this).addClass('selected')
.siblings().removeClass('selected')
.end() // 重新返回该对象
.find(':radio').attr('checked',true);
});

3、复选框控制行的高亮显示

复制代码 代码如下:

$('tobdy>tr').click(function(){
if( $(this).hasClass('selected') ){ // 判断是否有selected高亮样式
$(this).removeClass('selected')
.find(':checkbox').attr('checked',false);
}else{
$(this).addClass('selected')
.find(':checkbox').attr('checked',true);
}
});

4、表格内容筛选

复制代码 代码如下:

$(function(){
$('table tbody tr').hide()
.filter(":contains(李)").show();
});

时间: 2024-09-30 08:43:33

JQuery对表格进行操作的常用技巧总结_jquery的相关文章

jquery调整表格行tr上下顺序实例讲解_jquery

表格是大家比较常用的元素,有时候表格中的行需要调整顺序,下面就通过代码实例介绍一下如何利用jquery实现此功能,分享给大家供大家参考,具体内容如下 代码实例如下: <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</t

jQuery的12招常用技巧分享_jquery

1.关于页面元素的引用 通过jQuery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jQuery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换 只有jQuery对象才能使用jQuery定义的方法.注意dom对象和jQuery对象是有区别的,调用方法时要注意操作的是dom对象还是jQuery对象.普通的dom对象一般可以通过$()转换成jQuery对象. 如:$(document.get

jQuery 选择器、DOM操作、事件、动画_jquery

Jquery选择器 $(document).ready(function(){}) $(function(){}) 如果获取的对象是jQuery对象,那么在变量前面加上$,例如:var $variable=jQuery对象 选择器 1, 判断页面是否存在某元素:if($("#tt").length>0){} 或者if($("#tt")[0]){}; 2, 基本选择器 $("#test") 选择id为test的元素 $(".test

jQuery学习3:操作元素属性和特性_jquery

先看一个例子: 复制代码 代码如下: <a id="easy" href="#">http://www.jb51.net</a>现在要得到a标签的属性id.有如下方法: 复制代码 代码如下: jQuery("#easy").click(function() {     alert(document.getElementById("easy").id); //1     alert(this.id); /

如何用jquery控制表格奇偶行及活动行颜色_jquery

虽然jquery流行已经很多年了,一直都感觉很难,也没有花时间去学习它,只是偶尔哪天心血来潮了去看一点点,时隔多日又会忘得一干二净.最近用到表格奇偶行不同色,不得不去再看jquery,虽然感觉还是难,但已经不像以前一样无从下手了.做完后不得不来感叹一下jquery真是太牛了,不用自己再写一大堆javascript函数去实现了,简单几句轻松搞定. 先定义好表格的奇偶行样式,如下代码: 复制代码 代码如下: body { font-size:12px; } th { color: #FFFFFF;

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

以下列出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()

Jquery对数组的操作技巧

 这篇文章主要介绍了Jquery对数组的操作技巧,需要的朋友可以参考下 1. $.each(array, [callback]) 遍历[常用]    解释: 不同于例遍 jQuery 对象的 $.each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~). 回调函数拥有两个参数:第一个为对象的成员或数组的索引, 第二个为对应变量或内容. 如果需要退出 each 循环可使回调函数返回 false, 其它返回值将被忽略.  each遍历,相信都不陌生,在平常的事件处理中,是for循环的变体,但

手机处理文档 金山WPS移动版表格常用技巧

技巧一:Sheet重命名 Sheet重命名功能,说起来这个也不算什么技巧,但是由于手机屏幕有限,有的同学可能无法一下子找到方法.在此,阿mo特意提醒一下,双击Sheet名称出现光标,就可以重新键入新名称,再随便点别的地方新名称就保存好啦! 文档 金山WPS移动版表格常用技巧-word文档常用技巧"> 技巧二:表格直接拨电话 阿mo觉得如果是经常需要给客户打电话的人员一定会非常喜欢这个功能.如果没有表格直接拨打电话功能,情况应该是这样,打开文档,大脑默念一手机号,迅速关闭WPS打开输入电话号

jQuery常用的一些技巧汇总_jquery

引子 jQuery的存在,让学习前端开发的人感到前端越来越容易入门了,用简单的几行代码就可以实现需求,但是,你真的会用jQuery么,当代码运行后无法看到自己预期的效果,是不是觉得jQuery出了问题,其实,问题还是出在了自己会不会用上面.下面列举一些开发中经常遇到的应用实例,发现一下另一个不同的jQuery世界. 回到顶部按钮 利用jQuery里的animate和scrollTop方法,你便不需要使用插件创建简单的滚动到顶部动画. $('.top').click(function (e) {