Displaying data on JSP containing varying length <td> - javascript

I need help in displaying data on JSP in a particular format.
The data for the JSP is coming from java code in the form of a list which inturn is taking data from beans, basically I have a list of beans on my JSP page.
My data needs to be in a particular format, similar to the below table:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<table border="1">
<!-- Below row is supposed to be the linking element, lets call it Dep# -->
<tr>
<th>22603</th>
<th>23926</th>
<th>25018</th>
<th>26441</th>
<th>29757</th>
<th>31798</th>
<th>32436</th>
<th>32699</th>
<th>37948</th>
</tr>
<tr> <!-- Below set of row's are supposed to be the linked element, lets call it Emp# -->
<td>41162</td>
<td>37362</td>
<td>38311</td>
<td>37773</td>
<td>38666</td>
<td>40056</td>
<td>37519</td>
<td>38389</td>
<td>37596</td>
</tr>
<tr>
<td></td>
<td>38824</td>
<td>38896</td>
<td></td>
<td>39498</td>
<td></td>
<td>37548</td>
<td></td>
<td>37442</td>
</tr>
<tr>
<td></td>
<td></td>
<td>41009</td>
<td></td>
<td>37827</td>
<td></td>
<td></td>
<td></td>
<td>37259</td>
</tr>
<tr>
<td></td>
<td></td>
<td>41180</td>
<td></td>
<td>37473</td>
<td></td>
<td></td>
<td></td>
<td>37537</td>
</tr>
<tr>
<td></td>
<td></td>
<td>41967</td>
<td></td>
<td>37856</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>38805</td>
<td></td>
<td>39307</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>40690</td>
<td></td>
<td>40176</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>42144</td>
<td></td>
<td>38667</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>38390</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>37845</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
The list which is being passed from backend code has the following 2 beans in it:
1. deptNum(1 Dept can have many Emp)
2. empNum(1 Emp can be part of only 1 Dept)
How can I achieve this particular format of data for display?


<td></td> should be <td> </td> because when there's nothing inside the <td></td> the browser typically just kind of doesn't display it. is a non-breaking space.


According to your question, basically you have a set of Departments and many list of employees which belong to these departments.
I suggest you to solve this with "java.util.Set" and "java.util.Map".
In sense of "each employee has only one Department" means we have a list of Departments and they are unique in this list. So use "Set" instead of "List" passing from the backend.
Secondly, you can use this set as a KeySet of each employee Map. Then each map can show each department's employee if it exists for this map.
Finally, you can prepare a list of map to traverse in JSP part.
Set<String> deptSet = ....
foreach (String deptNum : deptSet) {
print("<th>" + deptNum + "</th>");
}
...
List<Map<String,String>> empMapList = ....
foreach (empMap : empMapList) {
Set empSet = empMap.getValues();
foreach (String empNum : empSet) {
if (empNum == null)
print("<td> /td>");
else
print("<td>" + empNum + "</td>");
}
}

Related

I cant assign a value to an javascript object key

im trying to make a tetris game , and ive made some progress, but im stuck with an object key assignement problem,
what im trying to do now is detect collisions of the shapes and what i thought of is to keep track of each shape's position
,by storing the coordinates in an object called alreadyOccupiedPos
and this objects stores the shapes as keys
,for example the key name of the first shape to appear will be '1' and the key name of the second shape to appear is '2' ect...
and each shape has a value as an array of arrays, the array includes the squares that make up the shape and each square
is represented as a sub-array, and the sub-array has two elements, the current row and the current column where
the square is within the board. I started by giving the alreadyOccupiedPos object a default key for the first shape.
And i have two key variables , the first one is numberOfSquares which represents the number of squares that the shape consists of,
and it gets reseted each time a new shape gets created or moved and then the i have shapeNumber which is a default parameter in the function that i can use to to refer
to the shape number in the alreadyOccupiedPos object .Now to the problem im facing , in the second loop where the shape drawing happens , and along with drawing the shape,
im trying to insert the location of each square in the alreadyOccupiedPos object by pushing an array that includes the current row and the current column where the
square is into the array that includes the squares of the shape, and this is what i tried to do alreadyOccupiedPos[shapeNumber][numberOfSquares] = [j + step, i + randomHorizantalPos];
and the problem is it just doesnt get assigned.
this is the codepen :
https://codepen.io/marwanoss/pen/gOmxPoP?editors=0010
this is the js code:
let tableBody = document.querySelector('table').children[0];
let tableRows = Array.from(tableBody.children)
//shapes
let L_shape = [
[1, 0, 0],
[1, 0, 0],
[1, 1, 1]
];
let S_shape = [
[0, 1, 1],
[0, 1, 0],
[1, 1, 0]
];
let Z_shape = [
[1, 1, 0],
[0, 1, 0],
[0, 1, 1]
];
let J_shape = [
[0, 0, 1],
[0, 0, 1],
[1, 1, 1]
];
let square_shape = [
[1, 1, 1],
[1, 1, 1],
[1, 1, 1]
];
let I_shape = [
[0, 1, 0],
[0, 1, 0],
[0, 1, 0]
];
let T_shape = [
[1, 1, 1],
[0, 1, 0],
[0, 1, 0]
]
let shapes = [L_shape, S_shape, Z_shape, J_shape, square_shape, I_shape, T_shape]
, colors = ['red', 'black', 'green', 'yellow', 'cyan', 'rgb(44, 10, 10)']
, randomlyChosenColor = colors[Math.floor(Math.random() * colors.length)]
, randomlyChosenShape = shapes[Math.floor(Math.random() * shapes.length)]
, randomHorizantalPos = Math.floor(Math.random() * 13)
, numberOfSquares = 0
, clearLimit = tableRows.length
, alreadyOccupiedPos = { 1: [] };
function recur(step = 0, shapeNumber = 1) {
//this condition checks whether a shape has reached the bottom of the board or not, if so a new shape gets generated and the position get reseted to the top of the board.
if (step === 17) {
clearLimit = step;
randomHorizantalPos = Math.floor(Math.random() * 13);
randomlyChosenShape = shapes[Math.floor(Math.random() * shapes.length)];
randomlyChosenColor = colors[Math.floor(Math.random() * colors.length)];
alreadyOccupiedPos[shapeNumber + 1] = [];
numberOfSquares = 0;
recur(0, shapeNumber)
} else {
//this for loop clears the board
for (let i = 0; i < tableRows.slice(0, clearLimit - 1).length; i++) {
for (let j = randomHorizantalPos; j < randomHorizantalPos + 3; j++) {
tableRows[i].children[j].style.backgroundColor = 'white'
}
}
//after the board gets cleared by the previous loop this loop creates the shape by giving the squares a background color to create the illusion of the shape moving by adding a step in each recursive call
for (let i = 0; i < tableRows.length; i++) {
for (let j = 0; j < randomlyChosenShape.length; j++) {
if (randomlyChosenShape[j][i] === 1) {
tableRows[j + step].children[i + randomHorizantalPos].style.backgroundColor = randomlyChosenColor;
alreadyOccupiedPos[shapeNumber][numberOfSquares] = [j + step, i + randomHorizantalPos];
numberOfSquares++;
}
}
}
setTimeout(() => {
numberOfSquares = 0;
recur(step + 1, shapeNumber)
}, 1000);
}
}
recur()
and this is the html (thats alot of html lol, i could've created the html using a loop in js i just forgot xD) :
<body>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<script src="tetris.js"></script>
</body>
and this is the css:
body{
display: flex;
padding: 0;
margin: 0;
box-sizing: border-box;
background-color: black;
}
html{
font-size: 10px;
}
table{
background-color: white;
height: 60rem;
width: 50rem;
margin: 5% auto;
}
table td{
background-color: white;
border: black .1px solid;
}

alreadyOccupiedPos[shapeNumber][numberOfSquares] has already been assigned. Maybe you need to change the line
recur(0, shapeNumber)
to
recur(0, shapeNumber + 1);
to assign the value to the newly created array.

How to make a popup form appear after clicking an 'empty' slot on a weekly calendar?

I am trying to create a calendar in which you can switch between month and week view. I don't think it will be hard to create the grid for the calendar, but I want to have a popup that appears when I click a slot on the calendar. Just like in Google Calendar, when you click a slot, a pop-up appears and you can edit your new event. I want to do something like that where the event will be created and then stored in the backend SQL file that I have.
This is the code I have currently:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Week View</h2>
<table>
<tr>
<th>Time</th>
<th>Sunday</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
</tr>
<tr>
<td>6:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>8:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>10:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>11:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>12:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>1:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>6:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>8:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>10:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>11:00 pm</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>12:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>1:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>2:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>4:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>5:00 am</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
and this basically shows this
basic time schedule
I want to make the empty slots like some kind of button and that, when clicked, will open up a popup that will give me the option to choose the time of the event I want to place. After 'saving' this event, I want to send this info to my SQL database and then this block will then be disabled. I have already looked into existing websites that provide code for calendars, but I prefer to do it on my own (please don't send me back to fullcalendar). How do I make these empty slots, like buttons, that will open up a popupform?
Let me know if there is anything you want me to clarify. Thanks!

You could place a <div> in each <td> and assign 'onclick' method to run JS function.
In your JS function, use createElement to create a popup <div> and appendChild it to body. Then you will see the popup.

In a table, add property to a cell in a column which include a cell containing a specific text

I have a table as shown:
<table border="1" cellpadding="1" cellspacing="1" class="td1166">
<tbody>
<tr>
<td>Number</td>
<td>A</td>
<td>B</td> //Assume that this cell indicate the column I need to select
<td>C</td>
<td>D</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td> //So the last cell in the 'A' column is the one I want to add property, and A is known.
<td></td>
<td></td>
</tr>
</tbody>
</table>
All the need I have presented in the code.
I was trying using jQuery but I have no idea how to select as such. Hope your kind help!

You can try something like this, note: this will only work for the first and last rows, you will need different selectors if you have different rows
$('tr:first td').each(function(i,v){
if($(this).text() == "B") {
var index = $(v).index();//get the index of the colomn
$('tr:last td').eq(index).css('color','red');//select the element
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" cellpadding="1" cellspacing="1" class="td1166">
<tbody>
<tr>
<td>Number</td>
<td>A</td>
<td>B</td> <!--//Assume that this cell indicate the column I need to select-->
<td>C</td>
<td>D</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td>here</td><!-- //So the last cell in the 'A' column is the one I want to add property, and A is known.-->
<td></td>
<td></td>
</tr>
</tbody>

Get the last tr which id begins with Row_

I want to get with jQuery the greater id for all tr in a table.
If I have this table:
<table id="productsTable" style="width:100%;">
<thead>
<tr>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr id="Row_0">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_1">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_2">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_3">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"></td>
</tr>
</tfoot>
</table>
I want to get the id Row_3.
I can use the :last selector, $( "tr:last" ) but it doesn't work because it returns the row for the <tfoot> section.
Maybe there is a way to add a filter to the :last selector to find the last tr with an id that begins with Row_.
Any advice?

You can use attribute start with selector:
$("tr[id^='Row_']:last" )

Assuming all the rows in tbody have the id just use tbody in selector
$( "tbody tr:last" )

You can use starts with
alert($("tr[id^='Row_']:last").length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="productsTable" style="width:100%;">
<thead>
<tr>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr id="Row_0">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_1">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_2">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="Row_3">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"></td>
</tr>
</tfoot>
</table>
If you just want last tr inside tbody then use:
$("tbody tr:last")

Jquery nextUntil and row cells

There is a html table with the following structure:
<table>
<tr class="header">
<td><img id="test_click" src=""></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr class="header">
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
How can i hide all table rows between two using jquery?
This code does not work as i suspected :(
$("#test_click").click(function(){
$(this).parent().parent().nextUntil('tr.header').find('tr').hide();
});

nextUntill already selects your trs. No need to .find anything:
$("#test_click").click(function() {
$(this).parent().parent().nextUntil('tr.header').hide();
});
http://jsfiddle.net/nMBrw/

Categories

Resources