jquery table展开折叠效果-白红宇的个人博客

jquery table展开折叠效果

发布日期：2021-07-17 20:20:30 浏览次数：2 分类：技术文章

本文共 1036 字，大约阅读时间需要 3 分钟。

今天要做一个table的展开 折叠效果，想起以前自己收藏了一个，寻无果，索性自己做一个
<!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=gb2312" />
    <title>无标题文档</title>
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <script language="javascript" type="text/javascript">
        function show_and_hide_tr(tb_id, obj) { 
            $("#" + tb_id).find("tr").each(function(i) { 
                i > 0 ? (this.style.display == "none" ? this.style.display = "" : this.style.display = "none") : ($(this).next().css("display") == "none" ? (obj.value = "折叠") : (obj.value = "展开"));
            });
        }
    </script>
</head>
<body>
    <table id="tb1" style="width: 100%;" border="1">
        <tr>
            <th colspan="3">
                <input type="button" value="折叠" onclick="show_and_hide_tr('tb1',this);" />
            </th>
        </tr>
        <tr>
            <td>
                 作者：ikmb QQ:154179812
            </td>
            <td>
                 欢迎交流
            </td>
            <td>
                 
            </td>
        </tr>
        <tr>
            <td>
                 
            </td>
            <td>
                 
            </td>
            <td>
                 
            </td>
        </tr>
    </table>
</body>
</html>

转载地址：https://blog.csdn.net/ikmb/article/details/3516489 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：元素 float:right 后右对齐换行原因

下一篇：Linq 自定义SQL语句返回数值

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章