从您的代码来看，您已经将 `list` 转换成了 JSON 格式
(`jsonString`)，但是随后在 JSP 的 `<% for
(test_information news:list) { %>` 循环中仍然尝试直接使用原始的 `list` 对象。这是因为一旦将列表序列化为 JSON 字符串后，原始的 Java 列表对象就不再可用。
### 解决方案
如果您希望既生成 JSON 数据又能在页面上通过 JSP 循环渲染数据，则需要分别处理这两种需求：
#### 方案一：保留
原生 Java 列表用于 JSP 渲染
如果还需要在 JSP 页面中遍历 `list`，那么不要将其转换为 JSON 格式，而是保持其作为 Java 对象的状态：
```jsp
<%
// 直接使用 session 中的 list 进行渲染
List<test_information> list =
(List<test_information>
;) session
.getAttribute
("date
");
if
(list != null && !list
.isEmpty
()) {
for
(test_information news : list) {
%>
<tr class=
"head_tr
">
<td class=
"zero_box
">
<input type=
"checkbox
" name=
"selectedTels
" value=
"<%=news
.getTel
()%>
" onchange=
"updateSelection
(this)
" style=
"zoom: 3
00%;
">
</td>
<td class=
"first_box
">
<table>
<tr><td class=
"material_box
"><%= news
.getMaterial
() %></td></tr>
<tr><td class=
"time_box
"><%= news
.getStart_time
() %></td></tr>
</table>
</td>
<td class=
"second_box
">
<%= news
.getWashing_method
() %> <br/>
<%= news
.getPrice
() %>
</td>
<td class=
"third_box
">
<form action=
"
">
<input name=
"id
" value=
"<%=news
.getTel
()%>
" type=
"hidden
">
<input type=
"submit
" class=
"func_button
" value=
"税费
"><br>
<input type=
"submit
" class=
"func_button
" value=
"查看凭证
"><br>
<input type=
"submit
" class=
"func_button
" value=
"删除凭证
">
</form>
</td>
</tr>
<%
}
} else {
out
.println
("<tr><td colspan=&
#39;4&
#39;>无数据</td></tr>
");
}
%>
```
在此种情况下，您可以继续访问原始的 `list` 并正常地进行循环操作。
---
#### 方案二：仅依赖 JSON 数据并移除服务器端逻辑
如果您更倾向于前端完全接管表格的构建任务（比如利用 JavaScript 来解析
和显示数据），可以改用以下方式：
**步骤1:** 将 JSON 数据传递到客户端。
```jsp
<script>
var jsonData = &
#39;<%= new com
.google
.gson
.Gson
()
.toJson
(session
.getAttribute
("date
")) %>&
#39;;
var dataList = JSON
.parse
(jsonData
.replace
(/
"/g, &
#39;
"&
#39
;)); // 替换单引号等特殊字符
</script>
```
**步骤2:** 使用 JavaScript 动态生成 HTML 表格内容。
```html
<div class=
"body
">
<table id=
"dynamicTable
" class=
"cer
"></table>
</div>
<script>
function renderTable
(data) {
const tableBody =
document.getElementById(&
#39;dynamicTable&
#39
;);
data
.forEach
(function
(item) {
const row =
document.createElement
(&
#39;tr&
#39
;);
row
.className = &
#39;head_tr&
#39;;
// 第一列：复选框
const checkboxCell =
document.createElement
(&
#39;td&
#39
;);
checkboxCell
.className = &
#39;zero_box&
#39;;
const checkBoxInput =
document.createElement
(&
#39;input&
#39
;);
checkBoxInput
.type = &
#39;checkbox&
#39;;
checkBoxInput
.name = &
#39;selectedTels&
#39;;
checkBoxInput
.value = item
.tel;
checkBoxInput
.onchange = function
() {
updateSelection
(this);
};
checkBoxInput
.style
.zoom = &
#39;3
00%&
#39;; // 设置样式
checkboxCell
.appendChild
(checkBoxInput);
// 添加其他单元格
...
// 示例第二列的内容
const firstColumnDiv =
document.createElement
(&
#39;td&
#39
;);
firstColumnDiv
.className = &
#39;first_box&
#39;;
const materialInfoRow =
document.createElement
(&
#39;tr&
#39
;);
const timeInfoRow =
document.createElement
(&
#39;tr&
#39
;);
const materialTd =
document.createElement
(&
#39;td&
#39
;);
materialTd
.className = &
#39;material_box&
#39;;
materialTd
.textContent = item
.material || &
#39;&
#39;;
const timeTd =
document.createElement
(&
#39;td&
#39
;);
timeTd
.className = &
#39;time_box&
#39;;
timeTd
.textContent = item
.start_time || &
#39;&
#39;;
materialInfoRow
.appendChild
(materialTd);
timeInfoRow
.appendChild
(timeTd);
const innerTable =
document.createElement
(&
#39;table&
#39
;);
innerTable
.appendChild
(materialInfoRow);
innerTable
.appendChild
(timeInfoRow);
firstColumnDiv
.appendChild
(innerTable);
row
.appendChild
(checkboxCell);
row
.appendChild
(firstColumnDiv);
// 更多动态添加
...
tableBody
.appendChild
(row);
});
}
window
.onload = function
() {
renderTable
(dataList); // 初始化加载数据
};
function updateSelection
(element) {
console
.log
(`Checkbox with value
${element
.value} is now
${
(element
.checked ? &
#39;checked&
#39; : &
#39;unchecked&
#39
;)}`);
}
</script>
```
此方法避免了服务端复杂的数据绑定逻辑，并交由浏览器负责 DOM 构建。
---
扫一扫
2191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
