使用 css 和 jquery 扩展 table 代码

Question

我有这个 html 文件来创建一个 table 可以通过单击 + 或 - 展开和折叠的页面:

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()

table,
tr,
td,
th {
  border: 1px solid black;
  border-collapse: collapse;
}
tr.header {
  cursor: pointer;
}

<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>

我不知道我的文件有什么问题？这不是运行

Answer 1

你必须像这样在底部写脚本-

<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>

Answer 2

您需要做的就是将代码放入 $(document).ready(function({})。检查 DEMO

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

您可以了解更多 ready() function HERE

使用 css 和 jquery 扩展 table 代码

Expand table code using css and jquery

html

css

jquery

expand

collapse