用jquery实现显示和隐藏部分tr
我写了一个js，要达到的目标是：1.打开页面时除第一行外，其余的行都隐藏；2.当点击“显示”之后，后面的行显示出来；3.当点击“隐藏”之后，后面的行都隐藏...
我写了一个js，要达到的目标是：
1.打开页面时除第一行外，其余的行都隐藏；
2.当点击“显示”之后，后面的行显示出来；
3.当点击“隐藏”之后，后面的行都隐藏 展开
1.打开页面时除第一行外，其余的行都隐藏；
2.当点击“显示”之后，后面的行显示出来；
3.当点击“隐藏”之后，后面的行都隐藏 展开
3个回答
展开全部
这个有好几种方式的
一种就是控制大框架的高度，超出隐藏，然后Js是控制点击显示的时候高度自适应，
点击隐藏的时候高度为设置的高度。
大致写下jquery吧 看下应该不难
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
<li>第五行</li>
</ul>
<input type="button" value="显示"><input type="button" value="隐藏">
第一种
<script type="text/javascript">
$('input[val="隐藏"]').click(function(){
$('li:first').show().siblings('li').hide();
})
$('input[val="显示"]').click(function(){
$('li').show();
})
</script>
第二种
<script type="text/javascript">
$('input[val="隐藏"]').click(function(){
$('ul').css({height:'20px',overflow:'hidden'})
})
$('input[val="显示"]').click(function(){
$('ul').css({height:'auto',overflow:'hidden'})
})
</script>
第三种
<script type="text/javascript">
$('li:first').after('</ul><ul class="ul1">')
$('input[val="隐藏"]').click(function(){
$('ul.ul1').hide();
})
$('input[val="显示"]').click(function(){
$('ul.ul1').show();
})
</script>
简单的方法，具体怎么用还得看具体情况。
一种就是控制大框架的高度，超出隐藏，然后Js是控制点击显示的时候高度自适应，
点击隐藏的时候高度为设置的高度。
大致写下jquery吧 看下应该不难
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
<li>第五行</li>
</ul>
<input type="button" value="显示"><input type="button" value="隐藏">
第一种
<script type="text/javascript">
$('input[val="隐藏"]').click(function(){
$('li:first').show().siblings('li').hide();
})
$('input[val="显示"]').click(function(){
$('li').show();
})
</script>
第二种
<script type="text/javascript">
$('input[val="隐藏"]').click(function(){
$('ul').css({height:'20px',overflow:'hidden'})
})
$('input[val="显示"]').click(function(){
$('ul').css({height:'auto',overflow:'hidden'})
})
</script>
第三种
<script type="text/javascript">
$('li:first').after('</ul><ul class="ul1">')
$('input[val="隐藏"]').click(function(){
$('ul.ul1').hide();
})
$('input[val="显示"]').click(function(){
$('ul.ul1').show();
})
</script>
简单的方法，具体怎么用还得看具体情况。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
Jquery:
$(document).ready(function(e) {
$("#hid").click(function(){
$("#all tr").not($("#one")).hide(1000);
});
$("#show").click(function(){
$("#all tr").show(1000);
});
});
html 部分代码
<body>
<input type="button" value="show" id="show" />
<input type="button" value="hidden" id="hid" />
<table id="all">
<tr id="one"><td>one</td></tr>
<tr><td>...</td></tr>
<tr><td>...</td></tr>
<tr><td>...</td></tr>
<tr><td>...</td></tr>
</table>
</body>
css
table{ width:500px; border-collapse:0; border-spacing:0;}
table tr td{ border:1px solid #ccc;}
带动画效果哦 亲
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
比如说这是你的表格或者li我就拿li说吧：
<ul>
<li>
<span>这是第一行</tdspan
</li>
<li>
<span>这是第二行</span>
</li>
<li>
<span>这是第三行</span>
</li>
</ul>
<span onclick="wxz()">显示</span>
$(document).ready(function(){
wxz();
}
var biaoshi=1;
function wxz(){
var this=$("ul li").eq(0);
if(biaoshi==1){
this.siblings('li').show();
biaoqian=2;
}else{
this.siblings('li').hide();
biaoqian=1;
}
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
