小程序有什么类型_详解jQuery简略的表格应用

日期:2021-01-12 类型:科技新闻 

关键词:通道抠图,怎么在图片上编辑文字,创客贴作图神器,免费图片设计制作在线,背景透明图制作

详解jQuery简单的表格应用       本文主要对表格的简单应用:表格变色;表格展开关闭;表格内容筛选进行实例分析介绍。具有很好的参考价值,需要的朋友一起来看下吧

大致介绍

在CSS技术之前,网页的布局基本都是依靠表格制作,当有了CSS之后,表格就被很多设计师所抛弃,但是表格也有他的用武之地,比如数据列表,下面以表格中常见的几个应用来加深对jQuery的认识。

表格变色

基本的结构:

 table 
 thead 
 tr th 姓名 /th th 性别 /th th 暂住地 /th /tr 
 /thead 
 tbody 
 tr td 张三 /td td 男 /td td 杭州 /td /tr 
 tr td 王五 /td td 女 /td td 江苏 /td /tr 
 tr td 李斯 /td td 男 /td td 北京 /td /tr 
 tr td 赵六 /td td 女 /td td 兰州 /td /tr 
 tr td 往往 /td td 男 /td td 酒泉 /td /tr 
 tr td 李师傅 /td td 男 /td td 东京 /td /tr 
 /tbody 
 /table 

1、普通的隔行变色

首先定义两个样式

 .even{
 background: #FFF38F;
 .odd{
 background: #FFFFEE;
 } 

添加变色

 $('tr:odd').addClass('odd');
 $('tr:even').addClass('even');

2、单选框控制表格行高亮

在每一行之前加一个单选按钮,当单击某一行后,此行被选中高亮显示并且单选框被选中

$('tbody tr').click(function(){
 $(this)
 .addClass('selected')
 .siblings().removeClass('selected')
 .end()
 .find(':radio').attr('checked',true);
 });

3、复选框控制表格行高亮

 $('tbody tr').click(function(){
 if($(this).hasClass('selected')){
 $(this).removeClass('selected')
 .find(':checkbox').attr('checked',false);
 }else{
 $(this).addClass('selected')
 .find(':checkbox').attr('checked',true);
 });

表格展开关闭

基本结构:

 table 
 thead 
 tr th /th th 姓名 /th th 性别 /th th 暂住地 /th /tr 
 /thead 
 tbody 
 tr id="row_01" td colspan="3" 前台设计组 /td /tr 
 tr td /td td 张三 /td td 男 /td td 杭州 /td /tr 
 tr td /td td 王五 /td td 女 /td td 江苏 /td /tr 
 tr id="row_02" td colspan="3" 前台开发组 /td /tr 
 tr td /td td 李斯 /td td 男 /td td 北京 /td /tr 
 tr td /td td 赵六 /td td 女 /td td 兰州 /td /tr 
 tr id="row_03" td colspan="3" 后台开发组 /td /tr 
 tr td /td td 往往 /td td 男 /td td 酒泉 /td /tr 
 tr td /td td 李师傅 /td td 男 /td td 东京 /td /tr 
 /tbody 
 /table 

添加事件,当点击一个分类的标题时,这个分类关闭或者打开

 $('tr.parent').click(function(){
 $(this).toggleClass('selected')
 .siblings('.child_' + this.id).toggle();
 });

表格内容筛选

基本结构:

 table 
 thead 
 tr th /th th 姓名 /th th 性别 /th th 暂住地 /th /tr 
 /thead 
 tbody 
 tr id="row_01" td colspan="3" 前台设计组 /td /tr 
 tr td /td td 张三 /td td 男 /td td 杭州 /td /tr 
 tr td /td td 王五 /td td 女 /td td 江苏 /td /tr 
 tr id="row_02" td colspan="3" 前台开发组 /td /tr 
 tr td /td td 李斯 /td td 男 /td td 北京 /td /tr 
 tr td /td td 赵六 /td td 女 /td td 兰州 /td /tr 
 tr id="row_03" td colspan="3" 后台开发组 /td /tr 
 tr td /td td 往往 /td td 男 /td td 酒泉 /td /tr 
 tr td /td td 李师傅 /td td 男 /td td 东京 /td /tr 
 /tbody 
 /table 
 input type="text" id="filterName" / 

添加事件

 $('#filterName').keyup(function(){
 $('table tbody tr').hide().filter(":contains(' "+($(this).val())+" ' )").show();

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持凡科!