jsp 根据点击事件实现不同表格
时间: 2024-03-12 15:49:33 浏览: 23
要实现根据点击事件显示不同的表格,你可以采用以下步骤:
1. 在 JSP 页面中编写 HTML 代码,包含多个表格,每个表格都有不同的 ID。
2. 使用 JavaScript 监听点击事件,当用户点击某个按钮或链接时,获取其对应的表格 ID。
3. 使用 jQuery 的 show() 和 hide() 方法,根据获取的表格 ID 显示或隐藏对应的表格。
下面是一个示例代码:
```
<%-- HTML 代码 --%>
<table id="table1">
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
<table id="table2" style="display:none;">
<tr>
<th>表头1</th>
<th>表头2</th>
</tr>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
<%-- JavaScript 代码 --%>
<script>
$(document).ready(function() {
// 监听点击事件
$('button').click(function() {
// 获取表格 ID
var tableId = $(this).data('table-id');
// 显示或隐藏对应的表格
$('#' + tableId).show().siblings('table').hide();
});
});
</script>
<%-- 按钮代码 --%>
<button data-table-id="table1">显示表格1</button>
<button data-table-id="table2">显示表格2</button>
```
在这个示例中,我们在按钮上设置了 data-table-id 属性,用于指定要显示的表格 ID。当用户点击按钮时,JavaScript 代码会获取该属性的值,然后使用 jQuery 选择器查找对应的表格并显示它,同时隐藏其他表格。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)