jQuery基础学习04 jQuery中的表格操作及cookie插件的使用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery基础学习04 jQuery中的表格操作及cookie插件的使用相关的知识,希望对你有一定的参考价值。

 这章本来准备写成jQuery的表单操作和表格操作的。

然而昨天吧jQuery的表单操作看完,发现全部在炒之前章节的剩饭,所以就没写出来。

那么今天就来看看表格吧。

因为平常做的都是公司的内部管理系统,所以说数据表格用到的还是比较多的。那么在这里写出来说不定还能用上。

关于jQuery的表格应用

  • 隔行变色
    $(function(){
      $("tbody>tr:odd").addClass("样式1");//odd是选取奇数行
      $("tbody>tr:even").addClass("样式2");//even是选取偶数行
    })
  • 单选框控制表格行高亮
    $(tbody>tr).click(function(){
      $(this).addClass(选中样式).siblings().removeClass(选中样式).end().find(:radio).attr(checked,true);
    //请注意这里的end(),当用了siblings()后,后面所有的元素实际上操作的是this的统计元素,而用了end()后就回到了之前的$(this)元素
    });
    //注意到我们最开始初始化表格的时候,如果默认有单选框被选中,那么也需要进行处理。
    $(table :radio:checked).parent().parent().addClass(selected);
    //或者
    $(table :radio:checked).parents("tr").addClass(selected);
    //或者
    $(table>tr:has(:checked)).addClass(selected);
  • 复选框控制表格行高亮
    //最简单的那种就不写了,看看下面这种
    $(‘tbody>tr‘).click(function(){
      //判断当前是否选中
      var hasSelected=$(this).hasClass(‘selected‘);
      $(this)[hasSelected?"removeClass":"addClass"](‘selected‘)
         .find(‘:checkbox‘).attr("checked",!hasSelected);
    });
    //本示例突出[hasSelected?"removeClass":"addClass"]这种玩法
    //这实际上就是javascript的用法,因为一个对象里面的东西既可以用.这样的形式取出来,又可以用类似数组的形式取出来
  • 表格展开关闭
    //这种情况就是解决表格里面行数据有层级结构的
    $(function(){
        $(‘tr .parent‘).click(function(){
            $(this).toggleClass("selected")
                   .siblings(‘.child_‘+this.id).toggle();
        })
    })
  • 表格内容筛选
    //下面是表格的筛选操作
    $(function(){
        $("#filterName").keyup(function(){
            $("table tbody tr").hide()
                .filter(":contains(‘"+($(this).val())+"‘)").show();
        });
    });
    //这种一般都是用不上,因为我们要的表格一般都是翻页的,然后去后台查筛选,然后传数据给前台。

好吧,这本书本章的其他节都是在炒剩饭,唯一新用到的函数是

var $div_li=$("li");
$div_li.click(function(){
    var index=$div_li.index(this);//这种用法很有趣,其次就是index这个函数,是用于在选择出来的元素中,然后根据元素来获取元素的索引
})

还有就是js可以操作整个样式表的替换(这个我以前真的没玩过)

<link href="css/skin_0.css" rel="stylesheet" type="text/css" id="cssfile" />
$(function(){
   $("#cssfile").attr("href","css/skin_1.css"); 
})

还介绍了jQuery的一款操作cookie的小插件,可以帮忙简化cookie操作

<script src="js/jquery.cookie.js" type="text/javascript"></script>

$.cookie("MyCssSkin","232",{path:‘/‘,expires:10});//存cookie
//这里232为cookie的值,expires为cookie的期限,比如10就是存10天,-1就是删除cookie,删除也可以写成 $.cookie(’MyCssSkin’, null); 
//这里的path:‘/‘必须这么写,否则cookie的路径就会根据目录路径的不同自动设置,如http://www.xxx.com/user/,path会被设置为 ‘/user‘
var cookie_skin=$.cookie("MyCssSkin");//取cookie

以上是关于jQuery基础学习04 jQuery中的表格操作及cookie插件的使用的主要内容,如果未能解决你的问题,请参考以下文章

锋利的jQuery学习总结

jQuery--编辑表格

JavaWeb_jQuery基础篇

JavaWeb_jQuery基础篇

JavaWeb_jQuery基础篇

关于jquery简单操作简单表格