使用css和jquery扩展表代码

pu82cl6c 于 2022-11-27 发布在 jQuery

关注(0)|答案(2)|浏览(135)

我有这个html文件来创建一个页面，表可以通过单击+或-展开和折叠：
第一个
我不知道我的文件有什么问题？它没有运行

css

来源：https://stackoverflow.com/questions/29488671/expand-table-code-using-css-and-jquery

2条答案

按热度按时间

ztyzrc3y1#

您必须在底部这样写脚本-

<head>
<style type="text/css">
    table, tr, td, th 
    {
    border: 1px solid black;
    border-collapse:collapse;
    }
    tr.header {
    cursor:pointer;
    }
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

</head>
<table border="0">
    <tr class="header">
        <th colspan="2">Header <span>-</span>
        </th>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr class="header">
        <th colspan="2">Header <span>-</span>
        </th>
    </tr>
    <tr>
        <td>date</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
    <tr>
        <td>data</td>
        <td>data</td>
    </tr>
</table>
<script type="text/javascript">  
     var $headers = $('.header').click(function () {
    $(this).find('span').text(function (_, value) {
        return value == '-' ? '+' : '-'
    });
    $(this).nextUntil('tr.header').slideToggle(100, function () {});
    });
    $headers.find('span').text('+')
    $('table tr:not(.header)').hide()
</script> 
<body>

或者将脚本放在ready function中
就像这样：

<script type="text/javascript">  
$(document).ready(function(){
     var $headers = $('.header').click(function () {
    $(this).find('span').text(function (_, value) {
        return value == '-' ? '+' : '-'
    });
    $(this).nextUntil('tr.header').slideToggle(100, function () {});
    });
    $headers.find('span').text('+')
    $('table tr:not(.header)').hide()    
})

</script>

赞(0）回复(0）举报 2022-11-27

x6492ojm2#

你需要做的就是把你的代码放在$(document).ready(function({})里面。检查DEMO

$(document).ready(function(){ 
    /// your code here
});

您可以了解有关ready()函数HERE详细信息

赞(0）回复(0）举报 2022-11-27

我来回答

使用css和jquery扩展表代码

2条答案

相关问题

热门标签

最新问答