使用 JSP、Java 和 Javascript 的带有 DB 数据的 HTML 表

Posted 2023-02-24

技术标签:

【中文标题】使用 JSP、Java 和 Javascript 的带有 DB 数据的 HTML 表【英文标题】：HTML Table with DB Data using JSP, Java and Javascript 【发布时间】：2016-04-07 08:54:01 【问题描述】：

简介： 在没有任何框架或外部库的帮助下，我必须使用 JSP、Java、javascript 和 JQuery 为大学课程创建一个 webapp。在这个 web 应用程序中，我们必须实现一个像 Table 这样的日历，它显示您的课程，这些课程存储在一个数据库中。因此，我创建了一个包含许多单元格的表格，每个单元格都有自己的 id，几乎每个单元格都有自己的 onclick 处理程序，它会将您引导到一个页面，您可以在该页面中创建/编辑或删除您的课程。

问题：我无法在此表中显示存储在数据库中的值，因为我在 java 中有一个 ResultSet，我无法在 javascript 中进行编辑细胞。

注意：我知道这不是一种好的编程风格，但这不是重点。它只需要工作，就是这样。

Java 部分：

<%@ page import="java.sql.*"%>
<%@ page import="javax.sql.*"%>
<%@ page import="java.util.*" %>
<%
//Establishing Connection to DB
Class.forName("com.mysql.jdbc.Driver");
java.sql.Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/mysql","root","123456");
Statement st= con.createStatement();
/*=======================================================================
Getting Data for td's - This is The Problematic Section
=======================================================================*/
 ResultSet rs1 = st.executeQuery("SELECT * FROM Termine");
 List<String[]> list1 = new ArrayList();
 List<String[]> list2 = new ArrayList();
 while(rs1.next())
    String veranName = rs1.getString(1);
    String terminid = rs1.getString(2); 
    list1.add(new String[]veranName);
    list2.add(new String[]terminid);

身体部位：

<body onload="insertIntoTable()">
<table border="1" style="width:100%" id="t01">
<tr id="00">
    <th>Uhrzeit</th> //Time
    <th>Montag</th>  //Monday
    <th>Dienstag</th> //...
    <th>Mittwoch</th>
    <th>Donnerstag</th>
    <th>Freitag</th>
    <th>Samstag</th>  //...
    <th>Sonntag</th> //Sunday
</tr>

<tr id="07">
    <td>07:00</td> //this is not supposed to be clickable
    <td id="mo07" onclick="go(this)"> </td> //this id means monday 07:00
    <td id="di07" onclick="go(this)"> </td>
    <td id="mi07" onclick="go(this)"> </td>
    <td id="do07" onclick="go(this)"> </td>
    <td id="fr07" onclick="go(this)"> </td>
    <td id="sa07" onclick="go(this)"> </td>
    <td id="so07" onclick="go(this)"> </td>
</tr>

<tr id="08">
    <td>08:00</td>
    <td id="mo08" onclick="go(this)"> </td>
    <td id="di08" onclick="go(this)"> </td>
    <td id="mi08" onclick="go(this)"> </td>
    <td id="do08" onclick="go(this)"> </td>
    <td id="fr08" onclick="go(this)"> </td>
    <td id="sa08" onclick="go(this)"> </td>
    <td id="so08" onclick="go(this)"> </td>

</tr>
<tr id="09">
    <td>09:00</td>
    <td id="mo09" onclick="go(this)"> </td>
    <td id="di09" onclick="go(this)"> </td>
    <td id="mi09" onclick="go(this)"> </td>
    <td id="do09" onclick="go(this)"> </td>
    <td id="fr09" onclick="go(this)"> </td>
    <td id="sa09" onclick="go(this)"> </td>
    <td id="so09" onclick="go(this)"> </td>
</tr>
<tr id="10">
    <td>10:00</td>
    <td id="mo10" onclick="go(this)"> </td>
    <td id="di10" onclick="go(this)"> </td>
    <td id="mi10" onclick="go(this)"> </td>
    <td id="do10" onclick="go(this)"> </td>
    <td id="fr10" onclick="go(this)"> </td>
    <td id="sa10" onclick="go(this)"> </td>
    <td id="so10" onclick="go(this)"> </td>
</tr>
<tr id="11">
    <td>11:00</td>
    <td id="mo11" onclick="go(this)"> </td>
    <td id="di11" onclick="go(this)"> </td>
    <td id="mi11" onclick="go(this)"> </td>
    <td id="do11" onclick="go(this)"> </td>
    <td id="fr11" onclick="go(this)"> </td>
    <td id="sa11" onclick="go(this)"> </td>
    <td id="so11" onclick="go(this)"> </td>
</tr>
<tr id="12"> 
    <td>12:00</td>
    <td id="mo12" onclick="go(this)"> </td>
    <td id="di12" onclick="go(this)"> </td>
    <td id="mi12" onclick="go(this)"> </td>
    <td id="do12" onclick="go(this)"> </td>
    <td id="fr12" onclick="go(this)"> </td>
    <td id="sa12" onclick="go(this)"> </td>
    <td id="so12" onclick="go(this)"> </td>
</tr>
<tr id="13">
    <td>13:00</td>
    <td id="mo13" onclick="go(this)"> </td>
    <td id="di13" onclick="go(this)"> </td>
    <td id="mi13" onclick="go(this)"> </td>
    <td id="do13" onclick="go(this)"> </td>
    <td id="fr13" onclick="go(this)"> </td>
    <td id="sa13" onclick="go(this)"> </td>
    <td id="so13" onclick="go(this)"> </td>
</tr>
<tr id="14">
    <td>14:00</td>
    <td id="mo14" onclick="go(this)"> </td>
    <td id="di14" onclick="go(this)"> </td>
    <td id="mi14" onclick="go(this)"> </td>
    <td id="do14" onclick="go(this)"> </td>
    <td id="fr14" onclick="go(this)"> </td>
    <td id="sa14" onclick="go(this)"> </td>
    <td id="so14" onclick="go(this)"> </td>
</tr>
<tr id="15">
    <td>15:00</td>
    <td id="mo15" onclick="go(this)"> </td>
    <td id="di15" onclick="go(this)"> </td>
    <td id="mi15" onclick="go(this)"> </td>
    <td id="do15" onclick="go(this)"> </td>
    <td id="fr15" onclick="go(this)"> </td>
    <td id="sa15" onclick="go(this)"> </td>
    <td id="so15" onclick="go(this)"> </td>
</tr>
<tr id="16">
    <td>16:00</td>
    <td id="mo16" onclick="go(this)"> </td>
    <td id="di16" onclick="go(this)"> </td>
    <td id="mi16" onclick="go(this)"> </td>
    <td id="do16" onclick="go(this)"> </td>
    <td id="fr16" onclick="go(this)"> </td>
    <td id="sa16" onclick="go(this)"> </td>
    <td id="so16" onclick="go(this)"> </td>
</tr>
<tr id="17">
    <td>17:00</td>
    <td id="mo17" onclick="go(this)"> </td>
    <td id="di17" onclick="go(this)"> </td>
    <td id="mi17" onclick="go(this)"> </td>
    <td id="do17" onclick="go(this)"> </td>
    <td id="fr17" onclick="go(this)"> </td>
    <td id="sa17" onclick="go(this)"> </td>
    <td id="so17" onclick="go(this)"> </td>
</tr>
<tr id="18">
    <td>18:00</td>
    <td id="mo18" onclick="go(this)"> </td>
    <td id="di18" onclick="go(this)"> </td>
    <td id="mi18" onclick="go(this)"> </td>
    <td id="do18" onclick="go(this)"> </td>
    <td id="fr18" onclick="go(this)"> </td>
    <td id="sa18" onclick="go(this)"> </td>
    <td id="so18" onclick="go(this)"> </td>
</tr>
<tr id="19">
    <td>19:00</td>
    <td id="mo19" onclick="go(this)"> </td>
    <td id="di19" onclick="go(this)"> </td>
    <td id="mi19" onclick="go(this)"> </td>
    <td id="do19" onclick="go(this)"> </td>
    <td id="fr19" onclick="go(this)"> </td>
    <td id="sa19" onclick="go(this)"> </td>
    <td id="so19" onclick="go(this)"> </td>
</tr>
<tr id="20">
    <td>20:00</td>
    <td id="mo20" onclick="go(this)"> </td>
    <td id="di20" onclick="go(this)"> </td>
    <td id="mi20" onclick="go(this)"> </td>
    <td id="do20" onclick="go(this)"> </td>
    <td id="fr20" onclick="go(this)"> </td>
    <td id="sa20" onclick="go(this)"> </td>
    <td id="so20" onclick="go(this)"> </td>
</tr>
<tr id="21">
    <td>21:00</td>
    <td id="mo21" onclick="go(this)"> </td>
    <td id="di21" onclick="go(this)"> </td>
    <td id="mi21" onclick="go(this)"> </td>
    <td id="do21" onclick="go(this)"> </td>
    <td id="fr21" onclick="go(this)"> </td>
    <td id="sa21" onclick="go(this)"> </td>
    <td id="so21" onclick="go(this)"> </td>
</tr>
</table>

<button onclick="drucken()">Drucken</button>
<button onclick="logout()" style="float: right;">Logout</button>

脚本部分：

<script>
/*========================================================================
other Part of the Problem
======================================================================*/
function insertIntoTable()

var idArray = [<% for (int i = 0; i < list1.size(); i++)%>"<%= list1.get(i) %>"<%= i + 1 < list1.size() ? ",":"" %><%  %>];

var nameArray = [<% for (int i = 0; i < list2.size(); i++)%>"<%= list2.get(i) %>"<%= i + 1 < list2.size() ? ",":"" %><%  %>];

var len = idArray.length;

for (index = 0; index < len; index=index+1)
    var vname = idArray[index];
    var vid = nameArray[index];
    document.getElementById(vid).value=vname;
   

</script>

我尝试解决这个问题： 因此，我尝试将 ResultSet 放入 ArrayList 并将其转换为 Javascript 数组，以多种方式更新表。我还尝试以另一种方式实现它，但也没有用。我正在尝试解决这个问题超过 7 个小时......

问题： 我该如何解决这个问题？有没有更优雅的方式来做到这一点？

感谢您的帮助和时间。

【问题讨论】：

让java创建所有<tr>，即从<tr id="07"> .. 到... <tr id="21"> ... 在一个循环中，在加载期间您的页面。你不需要重复所有的 tr 部分并让 js 设置值 - 这对我来说太过分了。你也不能只对js数组做java列表，即使输出看起来没问题，它也不是你尝试的那么简单。您将需要为此涉及 json（正确的方法）。如上所述让Java为每一天/每一时间做值输出要更进一步，您至少需要生成有效的 id 属性。 @MrSimpleMind 好的，但是第一个 td 不应该是可点击的，我如何实现那个，ID 也必须在那里。该怎么做？ @RomanC 我的身份证怎么了？ 【参考方案1】：

（好的，我现在有时间更深入地研究一下。）

首先检查list1和list2中的数据插入！

我不确定您是否知道如何将内容放入列表中，而您可以看到您使用字符串数组，即listx.add(new String[]...);。 String[] 表示您使用数组。因此，当您稍后执行 java/javascript 混合时，您不会在代码中处理此问题。 (?)

所以我确实使用硬编码数据在本地模拟了 db 部分，例如：

list1.add(new String[]"free", "math", "zzz", "programming", "java", "free", "free");
list2.add(new String[]"mo07", "di07", "mi07", "do07", "fr07", "sa07", "so07");

我只是想让逻辑与您的逻辑尽可能相似，只需进行少量修改。

其次，我确实修改了 javascript。

现在请注意，我将 .value 替换为 .innerhtml，这是在 TD tag 中添加文本的正确方法。

function insertIntoTable()
var idArray = <%= (Arrays.toString(list1.get(0))).replace("[", "['").replace(", ","', '").replace("]","']") %>;
var nameArray = <%= (Arrays.toString(list2.get(0))).replace("[", "['").replace(", ","', '").replace("]","']") %>;
var len = idArray.length;
for (index = 0; index < len; index=index+1)
    var vname = idArray[index];
    var vid = nameArray[index];
    document.getElementById(vid).innerHTML = vname;

另请参阅我的 String[] 数组到 javascript 的“编码”，“惰性”替换 [ 和 , 符号。只是用'（引用）包装它，以便javascript可以将它理解为一个数组。

这会给我你的桌子，比如：

祝你好运。（关于解决这个问题的优雅方法，是的。但我认为你要学习到目前为止所做的事情。All steps are good for learning when they are made by the learner。正如我之前在评论中所写的，我会让 java 进行输出和表生成。作为硬编码整个表格并将数据提供给 javascript 只是为了填充 td 文本并没有获胜。有时最好向 javascript 提供数据（来自 java）。在您想为每个客户端或某些客户端执行快速逻辑的情况下计算等。但在你的情况下，我看不到并获利）

【讨论】：

哇，没想到会这样。非常感谢您花时间帮助我！！！我真的很感谢你的帮助，在过去的几天里我学到了很多东西，虽然我在为我的问题找到其他解决方案时遇到了一些麻烦，但最终还是设法找到了一个：我已经做到了：

window.onload=function()&lt;%while(rs.next()) String vid = rs.getString(1); String vname = rs.getString(2); %&gt;document.getElementById("&lt;%vid%&gt;").innerHTML="&lt;%vname%&gt;";&lt;%%&gt;

。我认为你的更好：D。再次感谢！！

以上是关于使用 JSP、Java 和 Javascript 的带有 DB 数据的 HTML 表的主要内容，如果未能解决你的问题，请参考以下文章

javascript、JSP、JS有啥区别和联系

jsp（Java Server Pages）和js（JavaScript）的区别：

JavaScript和JSP的区别？

如何检测企业 Java 项目（Java + JSP + Javascript）中的死代码？

在 JavaScript 中访问 Java / Servlet / JSP / JSTL / EL 变量