jquery table slideUp 兼容table滑动效果

最新推荐文章于 2023-05-19 16:37:30 发布
最新推荐文章于 2023-05-19 16:37:30 发布
阅读量2.6k 收藏
点赞数
分类专栏： html jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zoe_wang_ing/article/details/17245693
版权
html 同时被 2 个专栏收录
76 篇文章 0 订阅
订阅专栏
jquery
44 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery table slideUp 兼容table滑动效果</title>
<script type="text/javascript" src="../../js/jquery.js"></script>
<style type="text/css">
.hide {
    display: none;
}
.lc_list{
	width:714px;
	border-top:1px solid #eeeeee;
	border-bottom:1px solid #eeeeee;
	overflow:hidden;	
}
.lc_list tr{
	padding:6px 0;
}
.lc_list tr th{
	padding:0 0 0 15px;
	height:36px;
	line-height:36px;
	background:#fafafa;
	border-bottom:1px solid #eeeeee;
	font-size:12px;
	color:#999999;
	font-weight:normal;
	text-align:left;
}
.lc_list tr td{
	padding:6px 0 6px 0;
	height:36px;
	border-bottom:1px solid #eeeeee;
	line-height:36px;
	font-size:14px;
	color:#0e4f71;
	text-align:left;
}
.lc_list tr td em,.lc_list tr td span{
	padding:0 0 0 15px;
	height:36px;
	width:100%;
	display:inline-block;
	vertical-align:middle;
}
.lc_list tr:hover td em,.lc_list tr:hover td span{
	background:#ebf1e5;
}
.lc_list tr:hover td span{
	font-size:18px;
}
.lc_list tr td em:hover{
	vertical-align:middle;
}
.lc_list tr td em a{
	color:#0e4f71;
	width:53px;
    display: inline-block;
    height: 20px;
    padding: 0 5px;
	line-height:20px;
	margin-top:7px;
}
.lc_list tr:hover td em a{
	background:red;
	color:#ffffff;
	text-align:left;
	padding-left:6px;
}
.lc_list tr:hover td em a:hover.curre{
	background:green;
}
/*reset css*/
.lc_list .details tr:hover td em,.lc_list .details tr:hover td span{
	background:#f6f7f5;
}
.lc_list .details tr td em,.lc_list .details tr td span{
	background:#f6f7f5;
}
.lc_list .details tr td em{
	height:auto;
	width:auto;
}
.lc_list .details tr td em.progressbg{
	background: url("../images/progressbg.png") repeat-x scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 3px;
    display: inline-block;
    height: 14px;
    margin: 0;
    vertical-align: middle;
    width: 105px;
	padding:0;
}
.lc_list .details tr td em.progress{
	background: none repeat scroll 0 0 #2697D2;
    border-radius: 3px;
    display: inline-block;
    height: 14px;
    margin: 0;
    vertical-align: middle;
	padding:0;
}
.lc_list .details tr td em.bond{
	background: none repeat scroll 0 0 #DDDDDD;
    border-radius: 3px;
    display: inline-block;
    line-height: 20px;
    padding: 0 5px;
}
.details tr td{
	padding-left:15px;
	border:none;
}
</style>

</head>

<body>



                    <script type="text/javascript">
                    $(function(){
						Details('.lc_list a');
					});
					function Details(obj){
						$(obj).click(function(){
							var detail = $(this).parent().parent().parent().next('tr').children().children('.details');
							var ca = $(this);
							if(detail.hasClass('down')){																
								$(this).removeClass('curre');
								ca.parent().parent().parent().next('tr').slideUp(700);
								detail.slideUp(600);
								detail.removeClass('down');
								detail.addClass('up');
								return false;
							}
							if(detail.hasClass('up')){
								$('.details').slideUp(600)													
								$('.details').parent().parent().slideUp(700);
								$('.details').removeClass('down');
								$('.details').addClass('up');
								$(obj).removeClass('curre');
								$(this).addClass('curre')
								ca.parent().parent().parent().next('tr').slideDown(10);	
								detail.slideDown(1000);
								detail.removeClass('up');
								detail.addClass('down');
								return false;
							}
						});
					}
                    </script>
                    <table class="lc_list" cellpadding="0" cellspacing="0">
                    	<tr>
                        	<th>名称</th>
                            <th>年化收益</th>
                            <th>理财金额（￥）</th>
                            <th>预期收益（￥）</th>
                            <th>到期时间</th>
                            <th>操作</th>
                        </tr>
                        <tr>
                        	<td><em>四季红001期</em></td>
                            <td><span>11.2%</span></td>
                            <td><span>20,000</span></td>
                            <td><span>2240</span></td>
                            <td><span>2014-01-15</span></td>
                            <td><em><a href="#">详情</a></em></td>                     
                        </tr>
                   		<tr class="hide">
                        	<td colspan="6">
                            <div class="details up">
                                <table width="714" border="0" cellspacing="0" cellpadding="0">
                                  <tr>
                                    <td>投资期限：<em class="gray333">12个月</em></td>
                                    <td>购买时间：<em class="gray333">2013-08-14 15:02:56</em></td>
                                    <td>获取方式：<em class="gray333">原始购买</em></td>
                                  </tr>
                                  <tr>
                                    <td>状态：<em class="blue">正常锁定中</em></td>
                                    <td>完成进度：<em class="progressbg"><em class="progress" style="width:74%;"></em></em> 74%</td>
                                    <td>操作：<em class="bond"><i class="flow"></i>债卷流转<i class="question"></i></em></td>
                                  </tr>
                                </table>   
                            </div>
                            </td> 
                        </tr>
                        <tr>
                        	<td><em>四季红001期</em></td>
                            <td><span>11.2%</span></td>
                            <td><span>20,000</span></td>
                            <td><span>2240</span></td>
                            <td><span>2014-01-15</span></td>
                            <td><em><a href="#">详情</a></em></td>                     
                        </tr>
                   		<tr class="hide">
                        	<td colspan="6">
                            <div class="details up">
                                <table width="714" border="0" cellspacing="0" cellpadding="0">
                                  <tr>
                                    <td>投资期限：<em class="gray333">12个月</em></td>
                                    <td>购买时间：<em class="gray333">2013-08-14 15:02:56</em></td>
                                    <td>获取方式：<em class="gray333">原始购买</em></td>
                                  </tr>
                                  <tr>
                                    <td>状态：<em class="blue">正常锁定中</em></td>
                                    <td>完成进度：<em class="progressbg"><em class="progress" style="width:74%;"></em></em> 74%</td>
                                    <td>操作：<em class="bond"><i class="flow"></i>债卷流转<i class="question"></i></em></td>
                                  </tr>
                                </table>   
                            </div>
                            </td> 
                        </tr>
                        <tr>
                        	<td><em>四季红001期</em></td>
                            <td><span>11.2%</span></td>
                            <td><span>20,000</span></td>
                            <td><span>2240</span></td>
                            <td><span>2014-01-15</span></td>
                            <td><em><a href="#">详情</a></em></td>                     
                        </tr>
                   		<tr class="hide">
                        	<td colspan="6">
                            <div class="details up">
                                <table width="714" border="0" cellspacing="0" cellpadding="0">
                                  <tr>
                                    <td>投资期限：<em class="gray333">12个月</em></td>
                                    <td>购买时间：<em class="gray333">2013-08-14 15:02:56</em></td>
                                    <td>获取方式：<em class="gray333">原始购买</em></td>
                                  </tr>
                                  <tr>
                                    <td>状态：<em class="blue">正常锁定中</em></td>
                                    <td>完成进度：<em class="progressbg"><em class="progress" style="width:74%;"></em></em> 74%</td>
                                    <td>操作：<em class="bond"><i class="flow"></i>债卷流转<i class="question"></i></em></td>
                                  </tr>
                                </table>   
                            </div>
                            </td> 
                        </tr>

                       
                    </table>
              


</body>
</html>

Zoe_Wang_ing
关注
专栏目录
JQuery给table动态增加样式
kdiller的专栏
12-07 3609
<br />本例子操作的table表的class为stripe<br />//将dom对象转换成jquery对象 <br />$(document).ready(<br />   function() { <br />    //如果鼠标移到class为stripe的表格的tr上时，执行函数<br />    $(".stripe tr").mouseover(function() {<br />     $(this).addClass("over");<br />    });<br />    //给
jquery.tablescroll.js
02-17
自动滚动!jquery.tablescroll.js
jquery自动滚动表格
qq_38872934的博客
09-30 2578
想要做出日志表格自动滚动的样式，百度一下，发现大部分都是通过jQuery和定时器结合去实现的，记下来记下来~ 注意点 1.主要通过$obj.css()，改变top(结合position)或者margin-top属性，产生滚动效果。 2.滚动的操作对象主要是tr，因此thead的tr也有可能会受到影响，所以最好在html代码中设置2个table，1个放thead，1个放tbody，滚动操作第2个。 ...
jquery table数据自动滚动
hzm博客
06-26 1072
jquery table数据自动滚动
jquery自下而上循环滚动table
12-14
jquery自下而上循环滚动table
jquery操作html，table。点击按钮，逐行滚动显示，自动选中下一行数据
qq_34722251的博客
04-27 2043
jquery操作html，table。点击按钮，逐行滚动显示，自动选中下一行数据**以下为示例： 以下为代码： 首先html引用jquery.js**<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/cs
Jquery Table 操作
05-09
jQuery 提供了丰富的动画效果，如 `fadeIn()`, `fadeOut()`, `slideUp()`, `slideDown()` 等。结合使用这些方法，我们可以创建平滑的行移动和删除动画。 五、`jquery.table.tr.js` 文件 `jquery.table.tr.js` 很...
JQuery 自定义 Table
05-23
- jQuery的动画效果库提供了如淡入淡出(`fadeIn/fadeOut`)、滑动(`slideUp/slideDown`)等方法，可以为表格的操作增加视觉反馈。 6. **响应式设计**： - 使用媒体查询(`media queries`)和Bootstrap等框架，确保...
jQuery操作Table
08-11
- jQuery还提供了丰富的动画效果，如淡入淡出（fadeIn/fadeOut）、滑动（slideUp/slideDown）等，可以用于增加操作的视觉反馈。 8. **表单验证与数据校验**： - 在动态添加数据时，可能需要进行表单验证和数据...
jQuery动态生成表格及右键菜单功能示例
11-29
尽管本示例没有直接涉及jQuery动画，但jQuery库支持丰富的动画效果，例如淡入淡出、滑动和自定义动画。你可以利用`fadeIn`、`fadeOut`、`slideUp`等方法增强用户体验。 6. **优化与兼容性**： 注意，`live`方法在...
jquery给表格加滚动条
03-23
jquery给表格加滚动条的一个示例，用于普通table
jQuery table scroll表格插件内容部分加滚动条
11-11
jQuery table scroll表格插件内容部分加滚动条
jQuery表格顶部与左右两侧固定滚动代码
06-10
jQuery表格顶部与左右两侧固定滚动代码是一款左右两侧固定列，中间内容可以横向拖动，固定表头，可以横向拖动的表格插件代码。
css+jquery完美实现table表头固定显示(浮动)
11-18
利用css和jquery实现table表头固定（浮动）显示，不复制表格内容，不更改页面元素，完全通过js设置样式来实现。
JQUery实现上下循环滚动效果
08-03
运用JQUery原生方法实现文字上下循环滚动效果，我这里的是文字，你也可以换成图片。
jquery实现表格横向纵向滚动（横向滚动时左侧固定前几列）
最新发布
farmerXU的博客
05-19 521
【代码】jquery实现表格横向纵向滚动（横向滚动时左侧固定前几列）
jquery实战(一)——jquery实现table列表底部数据滚动
Garnett_zk的博客
12-11 979
系列文章目录 提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加 例如：第一章 Python 机器学习入门之pandas的使用 jquery实现table的滚动系列文章目录目的实现方法1.HTML代码2.JS代码3.总结总结 目的 因为业务的需要，我们希望实现实现table底部数据滚动，如下图 实现方法 1.HTML代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=
table 手机 滑动_Jquery移动端触屏左右滑动
weixin_39955355的博客
12-21 737
把相关代码粘出来了—欢迎来copy~~index.htmljquery移动端触屏左右滑动导航代码演示_大头网demo示例一全部科目会计从业会计职称注会税务师国际证书更多更多注会国际证书2更多4更多5demo示例二全部科目会计从业会计职称注会税务师国际证书更多更多注会国际证书2更多4更多5demo示例三全部科目会计从业会计职称注会税务师国际证书更多更多注会国际证书2大头网更多5demo示例四全部科目...
jquery 固定和滚动表格
wwttqq85538649的专栏
12-02 804
<br />http://jonsion.javaeye.com/blog/757300<br /> <br /> 
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值