JS 表格可折叠显示
时间: 2023-09-20 21:12:58 浏览: 68
折叠显示是一种常见的交互设计,可以在表格中实现。在JavaScript中,你可以使用事件监听和DOM操作来实现表格的折叠显示效果。
首先,你可以为表格中的每个折叠行添加一个点击事件监听器。当用户点击该行时,你可以使用JavaScript来切换该行的显示状态。你可以通过修改该行的CSS样式来实现显示和隐藏的效果。
以下是一个简单的示例代码,演示了如何使用JavaScript实现表格的折叠显示效果:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.foldable-row {
display: none;
}
</style>
</head>
<body>
<table>
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
</tr>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
</tr>
<tr class="foldable-row">
<td colspan="3">折叠内容1</td>
</tr>
<tr>
<td>内容4</td>
<td>内容5</td>
<td>内容6</td>
</tr>
<tr class="foldable-row">
<td colspan="3">折叠内容2</td>
</tr>
</table>
<script>
// 获取所有可折叠行的元素
var foldableRows = document.getElementsByClassName('foldable-row');
// 为每个可折叠行添加点击事件监听器
for (var i = 0; i < foldableRows.length; i++) {
foldableRows\[i\].addEventListener('click', function() {
// 切换显示状态
this.style.display = (this.style.display === 'none') ? 'table-row' : 'none';
});
}
</script>
</body>
</html>
```
在上面的示例中,我们使用了一个CSS类名 `.foldable-row` 来标识可折叠的行。通过设置该类的 `display` 属性为 `none`,我们将这些行默认隐藏起来。然后,通过JavaScript代码为这些行添加点击事件监听器,当用户点击时,切换行的显示状态。
请注意,这只是一个简单的示例,你可以根据自己的需求进行修改和扩展。希望对你有所帮助!
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
$(_tt).datagrid({ collapsible : true, rownumbers : true, remoteSort : false, nowrap : true, fitColumns : false, singleSelect : false, fit : true, striped : true, pagination : true, pageSize : pageSize, pageList : pageList, queryParams : getParams(), iconCls : 'icon-edit', idField : 'ID', url : _url_list, frozenColumns : [ [ { field : 'ck', checkbox : true }, { title : $.pde.message['common.button.operate'], field : 'viewFile', width : 70, sortable : false, align : 'center', formatter : function(value, rec, index) { var a = ''; a += '
'; a += ''; var b = ''; b += '
'; b += ''; return a + b; } }, { title : 'ID', field : 'ID', width : 30, sortable : false, hidden : true } ] ], columns : getColumnsByFields(_listFields), onLoadSuccess : function() { var amsResource = $.pde.power.resource; $.pde.power.getPower({ url : _path + amsResource.url + '/' + amsResource.amsInterfaceFileManager + '/' + _fonds_id, menu : '#functionMenu' }); }, onDblClickRow : function(rowIndex, rowData) { $.pde.jsLoader.call('js/p9/amc/library/commonEntry.js', 'viewBox', rowData.ID); } }); $.pde.jsLoader.call('js/p9/amc/library/commonGroup.js', 'customGroupView2', undefined);翻译一下这段代码的意思
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)