javascript - 使用 JSP、Java 和 Javascript 的带有数据库数据的 HTML 表

简介: 我必须在没有任何框架或外部库帮助的情况下使用 JSP、Java、Javascript 和 JQuery 为大学类(class)创建一个 webapp。在这个 webapp 中，我们必须实现一个像表这样的日历，它显示你的类(class)，这些类(class)存储在数据库中。所以我创建了一个包含许多单元格的表格，每个单元格都有自己的 ID，几乎每个单元格都有自己的 onclick 处理程序，它会将您定向到一个页面，您可以在该页面中创建/编辑或删除您在该单元格中的类(class)。

问题:我无法在此表中显示存储在数据库中的值，因为我有一个 Java 中的结果集，我无法在 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 个多小时......

问题: 我该如何解决这个问题？有更优雅的方法吗？

感谢您的帮助和时间。

最佳答案

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

首先检查您在list1 和list2 中的数据插入!

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

所以我确实使用硬编码数据在本地模拟了数据库部分:

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 标记 中添加文本的正确方法。

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 可以将其理解为数组。

这会给我你的 table ，比如:

祝大家好运。 (关于解决这个问题的优雅方法，是的，有。但我认为你要学习的只是你到目前为止所做的。当学习者制定所有步骤时，它们对学习有好处。正如我早些时候在评论中写道，我会让 java 进行输出和表格生成。因为硬编码整个表格并将数据提供给 javascript 只是为了填充 td 文本是没有取胜的。有时最好向 javascript 提供数据(来自java)。在你想为每个客户端做快速逻辑或一些计算等的情况下。但在你的情况下，我看不到也看不到利润)

关于javascript - 使用 JSP、Java 和 Javascript 的带有数据库数据的 HTML 表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34579379/

javascript - 使用 JSP、Java 和 Javascript 的带有数据库数据的 HTML 表

上一篇：mysql - Node js和mysql中的多个查询

下一篇：java - 使用 PHP 从 Android 应用程序向 MySQL 数据库中插入值不起作用？