JSP表格行按需显示问题求助：仅展示含数据库值的行

嘿，我看了你的代码，问题其实出在几个容易忽略的小细节上，咱们一步步来修正：

问题分析 #

1. JS函数从未触发执行：页面加载后showRow()函数没有被调用，所以所有行一直保持display:none的隐藏状态
2. 判断逻辑完全搞反：你要的是「当特定列（比如学生学号）有数据库值时显示行」，但代码里写的是空值时显示，正好和需求相反
3. 获取元素值的方式错误：document.getElementById("sroll"+i)拿到的是DOM元素对象，不是元素里的文本内容，直接和空字符串比较永远不成立

修正后的完整代码 #

首先调整JavaScript部分，让页面加载时自动执行判断，同时修正逻辑：

<script>
window.onload = function showRow() {
  for(let i=1;i<=3;i++){
    const row = document.getElementById("classrow"+i);
    const rollElement = document.getElementById("sroll"+i);
    // 取出文本内容并去除空格，避免空白字符干扰判断
    const rollValue = rollElement.textContent.trim();
    
    // 学号有值则显示行，否则隐藏；表格行建议用table-row而非block，更符合表格布局规范
    if(rollValue !== ""){
      row.style.display = 'table-row';
    } else {
      row.style.display = 'none';
    }
  }
}
</script>

然后优化JSP输出逻辑：如果数据库里的字段是null，JSP会直接输出null字符串，建议添加空值判断，让页面输出空字符串，方便JS判断：

<%@page import="beans.*"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Class Student Details</title>
<script>
window.onload = function showRow() {
  for(let i=1;i<=3;i++){
    const row = document.getElementById("classrow"+i);
    const rollElement = document.getElementById("sroll"+i);
    const rollValue = rollElement.textContent.trim();
    
    if(rollValue !== ""){
      row.style.display = 'table-row';
    } else {
      row.style.display = 'none';
    }
  }
}
</script>
</head>
<body>
<% 
class1 classd = (class1)session.getAttribute("classd");
if(classd != null){ 
%>
<table align="center" border="1"> <!-- 添加边框方便查看效果，可根据需求移除 -->
  <tr>
    <th>Class<br>Name</th>
    <th>Class<br>Total Marks</th>
    <th>Class<br>Start Date<br>(Class ID)</th>
    <th>Student<br>Name</th>
    <th>Student<br>Roll</th>
    <th>Student<br>Marks</th>
  </tr>
  <tr id="classrow1" style='display:none'>
    <td><%=classd.getCname() %></td>
    <td><%=classd.getTmarks() %></td>
    <td><%=classd.getCsdate() %> (<%=classd.getCid() %>)</td>
    <td><%= classd.getSname1() != null ? classd.getSname1() : "" %></td>
    <td id="sroll1"><%= classd.getSroll1() != null ? classd.getSroll1() : "" %></td>
    <td><%= classd.getMarks1() != null ? classd.getMarks1() : "" %></td>
  </tr>
  <tr id="classrow2" style='display:none'>
    <td></td>
    <td></td>
    <td><%=classd.getCsdate() %> (<%=classd.getCid() %>)</td>
    <td><%= classd.getSname2() != null ? classd.getSname2() : "" %></td>
    <td id="sroll2"><%= classd.getSroll2() != null ? classd.getSroll2() : "" %></td>
    <td><%= classd.getMarks2() != null ? classd.getMarks2() : "" %></td>
  </tr>
  <tr id="classrow3" style='display:none'>
    <td></td>
    <td></td>
    <td><%=classd.getCsdate() %> (<%=classd.getCid() %>)</td>
    <td><%= classd.getSname3() != null ? classd.getSname3() : "" %></td>
    <td id="sroll3"><%= classd.getSroll3() != null ? classd.getSroll3() : "" %></td>
    <td><%= classd.getMarks3() != null ? classd.getMarks3() : "" %></td>
  </tr>
</table>
<% } %>
</body>
</html>

额外简化方案（后端直接控制） #

其实你也可以不用JS，直接在JSP后端判断是否输出行，这样更高效，不用等前端渲染再调整显示状态：

<% if(classd.getSroll1() != null && !classd.getSroll1().trim().isEmpty()) { %>
<tr>
  <!-- 第一行内容 -->
</tr>
<% } %>

用这种方式，后端会直接跳过空数据的行，页面加载时就只显示有数据的行，对于新手来说可能更易理解和维护。

内容的提问来源于stack exchange，提问作者Sanghamitra Lahiri