我有这个html文件来创建一个页面,表可以通过单击+或-展开和折叠:第一个我不知道我的文件有什么问题?它没有运行
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中就像这样:
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>
x6492ojm2#
你需要做的就是把你的代码放在$(document).ready(function({})里面。检查DEMO
$(document).ready(function({})
$(document).ready(function(){ /// your code here });
您可以了解有关ready()函数HERE详细信息
2条答案
按热度按时间ztyzrc3y1#
您必须在底部这样写脚本-
或者将脚本放在
ready function
中就像这样:
x6492ojm2#
你需要做的就是把你的代码放在
$(document).ready(function({})
里面。检查DEMO您可以了解有关ready()函数HERE详细信息