Question

我有一个从数据库中获取动态数据的表。自然，SQL将在列中显示数据：

<table style="border: 1px none ;" border="1">
<tbody>
    <tr>
        <td>Player_picture</td>
        <td>Player_Name</td>
        <td>Age</td>
        <td>#Games</td>
        <td>Average_score</td>
    </tr>
</tbody>
</table>

我想将列转换为行并在浏览器中显示如下：

<table style="border: 1px none ; width: 703px;" border="1">
  <tbody>
    <tr>
      <td colspan="1" rowspan="5" style="vertical-align: top; width: 173px;">Row#1
        <br>
      </td>
      <td style="width: 242px;">Player#1 (picture)</td>
      <td style="width: 270px;">Player#2 (picture)</td>
      <td style="width: 240px;">Player#3 (picture)</td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 242px;">Name</td>
      <td style="vertical-align: top; width: 270px;">Name</td>
      <td style="vertical-align: top; width: 240px;">Name</td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 242px;">Age</td>
      <td style="vertical-align: top; width: 270px;">Age</td>
      <td style="vertical-align: top; width: 240px;">Age</td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 242px;">#Games</td>
      <td style="vertical-align: top; width: 270px;">#Games</td>
      <td style="vertical-align: top; width: 240px;">#Games</td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 242px;">Average_score</td>
      <td style="vertical-align: top; width: 270px;">Average_score</td>
      <td style="vertical-align: top; width: 240px;">Average_score</td>
    </tr>
    <tr>
      <td colspan="1" rowspan="5" style="vertical-align: top; width: 173px;">Row#2
        <br>
      </td>
      <td style="width: 242px;">Player#4 (picture)</td>
      <td style="width: 270px;">Player#5 (picture)</td>
      <td style="width: 240px;">Player#6 (picture)</td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 242px;">Name</td>
      <td style="vertical-align: top; width: 270px;">Name</td>
      <td style="vertical-align: top; width: 240px;">Name</td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 242px;">Age</td>
      <td style="vertical-align: top; width: 270px;">Age</td>
      <td style="vertical-align: top; width: 240px;">Age</td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 242px;">#Games</td>
      <td style="vertical-align: top; width: 270px;">#Games</td>
      <td style="vertical-align: top; width: 240px;">#Games</td>
    </tr>
    <tr>
      <td style="vertical-align: top; width: 242px;">Average_score</td>
      <td style="vertical-align: top; width: 270px;">Average_score</td>
      <td style="vertical-align: top; width: 240px;">Average_score</td>
    </tr>
  </tbody>
</table>

SQL查询：

<sql:query var="categoryPlayers" dataSource="jdbc/database">
    SELECT * FROM player WHERE category_id = ?
    <sql:param value="${pageContext.request.queryString}"/>
</sql:query>

然后在JSP中显示如下：

<c:forEach var="player" items="${categoryPlayers.rows}" varStatus="iter"></c:forEach>

Answer 1

您可以做的一件事是在单独的变量中生成每个列的内容，然后在表中输出变量：

<%@ page import="java.util.ArrayList" %>
<html>
<head>
<title>Hello World</title>
</head>
<body>

<%
    ArrayList<String> list = new ArrayList<String>();
    list.add("player0");
    list.add("player1");

    String picture = "";
    String name = "";
    String age = "";
    String games = "";
    String avgSc = "";

    for (String s : list) {
        picture += "<td>" + s + "</td>";
        name += "<td>" + s + "</td>";
        age += "<td>" + s + "</td>";
        games += "<td>" + s + "</td>";
        avgSc += "<td>" + s + "</td>";
    }

%>

<table style="border: 1px none ; width: 438px;" border="1">
<tbody>
    <tr>
        <td>Player_picture</td>
        <%=picture%>
    </tr>
    <tr>
        <td style="vertical-align: top;">Player_Name</td>
        <%=name%>
    </tr>
    <tr>
        <td style="vertical-align: top;">Age</td>
        <%=age%>
    </tr>
    <tr>
        <td style="vertical-align: top;">#Games</td>
        <%=games%>
    </tr>
    <tr>
        <td style="vertical-align: top;">Average_score</td>
        <%=avgSc%>
    </tr>
</tbody>
</table>

</body>
</html>

Answer 2

使用JQuery可以做到这一点。检查以下内容。

$("td:nth-child(3n)").after("<td class='newline'></td>");

td{
  display:inline-block;
  }
.newline{
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table style="border: 1px none ;" border="1">
<tbody>
    <tr>
        <td>Player_picture</td>
        <td>Player_Name</td>
        <td >Age</td>
        <td >#Games</td>
        <td>Average_score</td>
      <td >#Games</td>
      <td>Average_score</td>
    </tr>
</tbody>
</table>

如何使用Jsp和Mysql将列转换为行？

2 个答案: