在一个页面中如果有两个表格,导入数据时,能否只显示一个表格的数据,先隐藏另一个表格的数据
时间: 2024-10-12 18:16:30 浏览: 10
当你在一个页面上有两个表格并且希望在导入数据时动态地控制它们的显示时,你可以通过JavaScript或者jQuery来实现这个效果。下面是一种简单的方法:
1. **HTML结构**:
```html
<table id="table1" class="hidden">
<!-- 表格1内容 -->
</table>
<table id="table2" class="hidden">
<!-- 表格2内容 -->
</table>
```
2. **CSS**:
添加`.hidden`类来隐藏表格:
```css
.hidden {
display: none;
}
```
3. **JavaScript** 或 `$(document).ready()` (使用jQuery):
```javascript
function importData(tableId, data) {
// 导入数据到指定的表格
var table = document.getElementById(tableId);
for (var i = 0; i < data.length; i++) {
var row = table.insertRow(i);
// 插入数据到新行
var cell = row.insertCell(0);
cell.innerHTML = data[i];
}
// 显示对应的表格,隐藏其他
$('.hidden').not('#' + tableId).addClass('hidden');
$('#'+tableId).removeClass('hidden');
}
// 假设`data`是你导入的数据,调用函数时传入对应表格ID
importData('table1', yourDataArray); // 示例
```
每次导入数据时,调用`importData`函数并传入你想要显示的表格ID,就会将数据插入到指定的表格并相应地显示它,而隐藏其他表格。
阅读全文