jQuery实现table列的隐藏和展示

最新推荐文章于 2024-02-20 13:39:50 发布

newyear1988

最新推荐文章于 2024-02-20 13:39:50 发布

阅读量1.9w

点赞数 1

分类专栏： web前端文章标签： table jquery button function javascript border

本文链接：https://blog.csdn.net/newyear1988/article/details/7402593

版权

web前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

</script>
<input type="button" id="button1" value="隐藏/显示后三列"/>
<table id="mytable" border="1" cellpadding="0"
   cellspacing="0" bordercolor="#a3b0dc" style="border-collapse:collapse;">
   <tr >
       <td width="200">第一列</td>
        <td width="200">第二列</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>

newyear1988

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
jQuery实现table列的隐藏和展示

$(document).ready(function(){ $("td:eq(2)",$("tr")).hide(); $("td:eq(3)",$("tr")).hide(); $("td:eq(4)",$("tr")).hide(); $("#button1").click
复制链接

扫一扫