jquery table展开折叠效果

最新推荐文章于 2022-09-09 10:59:23 发布

ikmb

最新推荐文章于 2022-09-09 10:59:23 发布

阅读量1.1w

点赞数 1

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

本文链接：https://blog.csdn.net/ikmb/article/details/3516489

版权

前端技术专栏收录该内容

87 篇文章 0 订阅

订阅专栏

 
 今天要做一个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>
 