jquery 隐藏显示行

最新推荐文章于 2022-09-21 20:34:17 发布

iteye_16435

最新推荐文章于 2022-09-21 20:34:17 发布

阅读量390

点赞数

文章标签： jquery ViewUI

本文链接：https://blog.csdn.net/iteye_16435/article/details/82297006

版权

<html>
<style>
.button1 {background:url(pic\add.png);border:0px}
</style>
<body>

<script language="javascript" src="jquery-1.3.1.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("td:eq(3)",$("tr")).hide();
$('tr').find('td:eq(4)').hide();
$('tr').find('td:eq(2)').hide();
$("#button1").click(function(){
$("td:eq(3)",$("tr")).toggle(0); //设置为0表示不用动画，1000就1秒的时间来展示或者隐藏
$("td:eq(4)",$("tr")).toggle(0);
$("td:eq(2)",$("tr")).toggle(0);
}).toggle(
function(){
$("#button1").html('<img src="pic/del.png">');
},function(){
$("#button1").html('<img src="pic/add.png">');
}
);
});

</script>

<table id="mytable" border="1" cellpadding="0"
cellspacing="0" bordercolor="#a3b0dc" style="border-collapse:collapse;">
<tr >
<td width="200">第一列</td>
<td width="200">第二列<span id="button1"><img src="pic/add.png"></span></td>
<td width="200">第三列</td>
<td width="200">第四列</td>
<td width="200">第五列</td>
</tr>

<tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>

<tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>

<tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>

<tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>

<tr><td>id</td><td>id1</td><td>id2</td><td>id3</td><td>id4</td></tr>
</table>

</body>
</html>