In JSP, we have created html, table, rows (tr) and cells (td). However few days back, I was given challenge to create it dynamically based on some values returned from the database.
Below, I will show you how to create cells and rows dynamically.
based on some values returned from the database.
Below, I will show you how to create cells and rows dynamically.
Below, I will show you how to create cells and rows dynamically.
based on some values returned from the database.
Below, I will show you how to create cells and rows dynamically.
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>Customer Timeline Display</title>
<script>
function isEven(value) {
if (value%2 == 0)
return true;
else
return false;
}
function start() {
var eventName = new Array(4);
var eventDate = new Array(4);
eventName[0] = "Olympic";
eventName[1] = "Asian Games";
eventName[2] = "Grand Prix";
eventName[3] = "Football World Cup";
eventDate[0] = "2003";
eventDate[1] = "2005";
eventDate[2] = "2007";
eventDate[3] = "2011";
// get the reference for the body
var mybody = document.getElementsByTagName("body")[0];
// creates table and tbody elements
mytable = document.createElement("table");
mytablebody = document.createElement("tbody");
// creating all cells
for(var j = 0; j < eventName.length; j++) {
// creates a <tr> element
var event = eventName[j];
mycurrent_row = document.createElement("tr");
for(var i = 0; i < 3; i++) {
// these should be always 3 as 3 columns
// creates a td element
mycurrent_cell = document.createElement("td");
mycurrent_cell.setAttribute("width",300);
// creates a Text Node
if(isEven(j)) {
if(i == 2) {
currentText = document.createTextNode(eventName[j] + " on " + eventDate[j]);
mycurrent_cell.appendChild(currentText);
mycurrent_cell.setAttribute("align", "center");
}
}
if(!isEven(j)) {
if(i == 0) {
currentText = document.createTextNode(eventName[j] + " on " + eventDate[j]);
mycurrent_cell.appendChild(currentText);
mycurrent_cell.setAttribute("align", "center");
}
}
// appends the Text Node we created into the cell <td>
if(i == 1) {
mycurrent_image = document.createElement("img");
if(event == "Olympic") {
mycurrent_image.setAttribute("src","1.jpg");
mycurrent_image.setAttribute("height",60);
mycurrent_image.setAttribute("width",60);
} else if(event == "Asian Games") {
mycurrent_image.setAttribute("src","2.jpg");
mycurrent_image.setAttribute("height",60);
mycurrent_image.setAttribute("width",60);
} else if(event == "Grand Prix") {
mycurrent_image.setAttribute("src","3.jpg");
mycurrent_image.setAttribute("height",60);
mycurrent_image.setAttribute("width",60);
} else if(event == "Football World Cup") {
mycurrent_image.setAttribute("src","4.jpg");
mycurrent_image.setAttribute("height",60);
mycurrent_image.setAttribute("width",60);
}
mycurrent_cell.appendChild(mycurrent_image);
mycurrent_cell.setAttribute("bgColor","##BC8F8F");
mycurrent_cell.setAttribute("width",10);
mycurrent_cell.setAttribute("align","center");
}
// appends the cell td into the row tr
mycurrent_row.appendChild(mycurrent_cell);
}
// appends the row tr into tbody
mytablebody.appendChild(mycurrent_row);
}
// appends tbody into table
mytable.appendChild(mytablebody);
// appends table into body
mybody.appendChild(mytable);
// sets the border attribute of mytable to 0;
mytable.setAttribute("border","0");
mytablebody.setAttribute("bgColor", "#FFF5EE");
mytable.setAttribute("align","center");
}
</script>
</head>
<body onload="start()">
</body>
</html>
Hope you find it useful.
No comments:
Post a Comment