JSP跨行实例演示
新增数据

| | | | | // 模拟数据 - 实际项目中应从数据库获取
List
Map item1 = new HashMap<>();
item1.put("id"001" item1.put(
ame" "A" item1.put(""这是一个跨行展示的示例项目,用于演示JSP如何处理多行数据" item1.put(""进行中" dataList.add(item1);
Map item2 = new HashMap<>();
item2.put("id"002" item2.put("e"项目B" item2.put("description" "示例项目,展示不同状态的数据行" item2.put("status" "" dataList.add(item2);
Map item3 = new HashMap<>();
item3.put("id"003" item3.put("e"项目C" item3.put("description" "项目,需要跨越多行显示详细信息" item3.put("status" "中" dataList.add(item3);
for(Map item : dataList) {
%>
| | bg-yellow-100 text-yellow-800 <% } else if("已完成"equals(item.get("status"))) { %> bg-green-100 text-green-800 <% } else { %> bg-blue-100 text-blue-800 <% } %>" <%= item.get("" | |
<% } %>
// 交互功能实现
document.addEventListener('DOMContentLoaded', function() {
// 表格行点击效果
const tableRows = document.querySelectorAll('tbody tr');
tableRows.forEach(row => {
row.addEventListener('click', function() {
tableRows.forEach(r => r.classList.remove('bg-blue-50'));
this.classList.add('bg-blue-50');
});
});
// 搜索功能
const searchInput = document.querySelector('input[type="" searchInput.addEventListener('input', function() {
const searchTerm = this.value.toLowerCase();
tableRows.forEach(row => {
const text = row.textContent.toLowerCase();
row.style.display = text.includes(searchTerm) ? '' : 'none';
});
});
});