HTML Table with DB Data using JSP, Java and Javascript

Question

Introduction: I have to do create a webapp for a course in university using JSP, Java, Javascript and JQuery without the help of any framework or extern Library. In this webapp we have to implement a calendar like Table, which displays your courses, which are stored in a db. So I've created a Table with many many cells and every cell has its own id and nearly every cell has its own onclick handler, which directs you to a page, where u can create/edit or delete your course in that cell.

Problem: I can't show the values stored in the database in this table, because i've got a ResultSet in java, which i can't get to work in javascript, to edit the cells.

Note: I know it's not a good style of programming, but that's not the point here. It just has to work and that's it.

Java-Part:

<%@ 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 Part:

<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-Part:

<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>

My tries to solve this Problem: So I've tried to Put the ResultSet into an ArrayList and convert it to a Javascript array, to update the Table in many many ways. I also tried to implement it in another way, which didnt work either. I am trying to solve this problem now for more than 7 hours...

Question: How do i solve this Problem? Is there a more elegant way of doing this?

Thanks for the Help and the Time.

let java create all the <tr> i.e. from <tr id="07"> .. to ... <tr id="21"> ... in a loop, where you <%= from the list %> during the load of the page. You dont need to repeat all the tr-parts and letting js set the values - its for me overkill. — MrSimpleMind
– MrSimpleMind, Commented Jan 3, 2016 at 17:31
Also you can not just do java list to js array, it s not so simple as you are trying even if the output looks ok. You will need to involve json for this (the correct way). As said above let Java do the value output for each day/time — MrSimpleMind
– MrSimpleMind, Commented Jan 3, 2016 at 17:37
To move further you need at least generate valid id attributes. — Roman C
– Roman C, Commented Jan 3, 2016 at 17:50
@MrSimpleMind Okay, but the first td's shouldnt be clickable, how do i implement that one and the Ids have to be there too. How to do that? — Musti
– Musti, Commented Jan 3, 2016 at 18:02

MrSimpleMind · Accepted Answer · 2016-01-05 00:26:16Z

1

(Ok I just had time to look at this a bit deeper now.)

First check your data insertion in the list1 and list2!

I m not sure if you are aware of how you put things in your lists, while as you can see you use String arrays i.e. listx.add(new String[]{...});. The String[] indicates that you use arrays. So when you later do the java/javascript mix you dont take care of this in your code. (?)

So I did simulate the db part locally with hardcorded data like:

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

I just wanted to keep the logic as similiar as yours as possible with few modifications.

And second I did modify the javascript.

Now take a notice that I replaced the .value with .innerHTML which is the correct way for adding texts in a 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;
   }
}

Also see my "encoding" of an String[] array to javascript, with a "lazy" replacement of [ and , sign. Just to wrap it with ' (quotation) so javascript can understand it as an array.

This will give me your table like:

Good luck with the rest. (Regarding elegant way solving this, yes there is. But I think for you to learn just go with what you did so far. All steps are good for learning when they are made by the learner. As I wrote earlier in a comment I would let java do the output and table generation. As there is no winning in hardcode the entire table and giving the data to javascript just to fill the td texts. Sometimes it is good to feed javascript with data (from java). In situation where you want to do quick logic per client side or some calculating etc. But in your case I cant see and profit)

edited Jan 5, 2016 at 0:26

answered Jan 5, 2016 at 0:17

MrSimpleMind

8,8476 gold badges44 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Musti Over a year ago

Wow, Didn't Expect this. Thank you very very much for the time you took to help me!!! I really appreciate your help and I've learned much in the past few days although i had some trouble finding other solutions for my Problem, but in the end did manage to find one: I've done it with:

window.onload=function(){<%while(rs.next()){ String vid = rs.getString(1); String vname = rs.getString(2); %>document.getElementById("<%vid%>").innerHTML="<%vname%>";<%}%>

. I think yours is better though :D. AgainTHANKS!!

Collectives™ on Stack Overflow

HTML Table with DB Data using JSP, Java and Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related