aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes javascript to insert table and its data into html div tag Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Spring in Action this week in the Spring forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "javascript to insert table and its data into html div tag" Watch "javascript to insert table and its data into html div tag" New topic
Author

javascript to insert table and its data into html div tag

sri pathi
Greenhorn

Joined: Jul 15, 2008
Posts: 28
i have a situation where a javascript runs on form load and returns html code either inside a div tag(which inturn has table tag inside) or table tag. how can i append/insert this code using javascript to a div tag on the same html page.

<html>
<head>
<script type="text/javascript">
var thisMonth = new calendar('thisMonth',new Date());
var x= thisMonth.write(); //this returns a html code block in div(which has table inside it) or the table alone
</script>
</head>
<body>
<div id="test"></div> <!--insert value of x into div tag -->
</body>
</html>
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

Hints: you can locate an element with document.getElementById(), and you can insert HTML into an element by setting its innerHTML property.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
sri pathi
Greenhorn

Joined: Jul 15, 2008
Posts: 28
that doesn't seem to work! i've tried using innerhtml, appendchild, appendtextnode and most of the regular stuff... but nothing works?!:-(
i can get it work only by using document.write but that doesn't write it to the location I want.
[ July 16, 2008: Message edited by: sri pathi ]
Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Than put the document.write line at the location that you want it.

Saying it does not work does not give us any insight into your actual problem. We are not sitting there with you so you need to help us help you. Code, examples, links, etc would allow us to help.

Eric
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

Originally posted by sri pathi:
i've tried using innerhtml

There is no innerhtml property. As I posted, it's innerHTML.
sri pathi
Greenhorn

Joined: Jul 15, 2008
Posts: 28
Here's the code
JSP
------
<html>
<head>
<link rel="stylesheet" type="text/css" href="../calendar.css"/>
<script src="../calendar.js" type="text/javascript"></script>
<script type="text/javascript">
var thisMonth = new calendar('thisMonth',new Date());
var x= thisMonth.write(); //this returns a html code block in div(which has table inside it) or the table alone
</script>
</head>
<body>
<div id="test"></div> <!--insert value of x into this div tag -->
</body>
</html>
=========================================
Calendar.js
------------
function calendar(id,d){
this.id = id;
this.dateObject = d;
this.write = writeCalendar;
this.length = getLength;
this.month = d.getMonth();
this.date = d.getDate();
this.day = d.getDay();
this.year = d.getFullYear();
this.getFormattedDate = getFormattedDate;
//get the first day of the month's day
d.setDate(1);
this.firstDay = d.getDay();
//then reset the date object to the correct date
d.setDate(this.date);
}

var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');

function getFormattedDate(){
return (this.month+1) + '/' + this.date + '/' + this.year;
}

function writeCalendar(){
var calString = '';//'<div id="calContainer" class="calendario">';
//write month and year at top of table
calString += '<table id="cal' + this.id + '" cellspacing="0" width="200" style="border:none">';
//write the month
calString += '<tr><th colspan="7" class="month" margin="2px" id="selMonth" title='+ '"' + (this.month+1) + '"' +'>' + months[this.month] + ' ' + this.year + '</th></tr>';
//write a row containing days of the week
calString += '<tr>';
calString += '<table class="area">';

for(i=0;i<days.length;i++){
calString += '<th class="dayHeader">' + days[i].substring(0,1) + '</th>';
}

//write the body of the calendar
calString += '<tr>';
//create 6 rows so that the calendar doesn't resize
for(j=0;j<42;j++){
var displayNum = (j-this.firstDay+1);
if(j<this.firstDay){
//write the leading empty cells
calString += '<td class="empty"> </td>';
}else if(displayNum==this.date){
calString += '<td id="' + this.id +'selected" class="date" onKlik="javascript:changeDate(this,\'' + this.id + '\')">' + displayNum + '</td>';
}else if(displayNum > this.length()){
//Empty cells at bottom of calendar
calString += '<td> </td>';
}else{
//the rest of the numbered cells
calString += '<td class="days" name="dt" onKlik="javascript:changeDate(this,\'' + this.id + '\')" id="dt_'+j+'">' + displayNum + '</td>';
}
if(j%7==6){
calString += '</tr><tr>';
}
}
//close the last number row
calString += '</table></tr>';
//write the nav row
calString += '<tr>';
calString += '<td colspan="7"><table><tr>';
calString += '<td class="prevMon" onKlik="changeMonth(-1,\'' + this.id + '\')">Mes anterior</td>';
calString += '<td class="nextMon" onKlik="changeMonth(1,\'' + this.id + '\')">Mes siguiente</td></tr></table>';
calString += '</tr>';

calString += '</table>';
//calString += '</div>';
return calString;
}

function getLength(){
//thirty days has September...
switch(this.month){
case 1:
if((this.dateObject.getFullYear()%4==0&&this.dateObject.getFullYear()%100!=0)||this.dateObject.getFullYear()%400==0)
return 29; //leap year
else
return 28;
case 3:
return 30;
case 5:
return 30;
case 8:
return 30;
case 10:
return 30
default:
return 31;
}
}
function changeDate(td,cal){
cal = ival(cal);//the_method_is_evalMethod_of_js
document.getElementById(cal.id + "selected").className = "days";
document.getElementById(cal.id + "selected").id = "";
td.className = "date";
td.id = cal.id + "selected";
//set the calendar object to the new date
cal.dateObject.setDate(td.firstChild.nodeValue);
cal = new calendar(cal.id,cal.dateObject);
}

function changeMonth(mo,cal){
cal = ival(cal);//the_method_is_evalMethod_of_js
cal.dateObject.setMonth(cal.dateObject.getMonth() + mo);
cal = new calendar(cal.id,cal.dateObject);
cal.formattedDate = cal.getFormattedDate();
document.getElementById('calContainer').innerHTML = cal.write();
}
============================================
calendar.css
------------
.month, .nav{ background-color: none; color: #9e3e07; font: 10pt sans-serif; font-weight:bold; padding-bottom: 1ex;}
.nav{ cursor: pointer; cursor: hand; text-align:right; }
.prevMon{ color: #9e3e07; font: 10pt sans-serif; cursor: pointer; cursor: hand; text-align:left; padding-left: 2ex; }
.nextMon{ color: #9e3e07; font: 10pt sans-serif; cursor: pointer; cursor: hand; text-align:right; padding-left: 4ex; }
.dayHeader{ color: black; font: 10pt sans-serif; border-bottom: none; color:#9e3e07; font-weight:bold }
.empty{ background-color: none; border-bottom: none; }
.days{ color: black; background-color: none; font: 10pt sans-serif; border-bottom: none; border-left: none; border-right: none; cursor: pointer; cursor: hand; text-align:center; }
.date{ color: maroon; font: 10pt sans-serif; font-weight: bold; background: none; border-bottom: none; border-left: none; border-right: none; cursor: pointer; cursor: hand; text-align:center; }
.area{ width:198px; height:131px; background:url(../images/fondo_calen.gif); margin:10px 10px 0 10px; }

I'm trying to avoid using document.write (read somewhere it's not a good practice), instead I would like to use DOM methods. Hope this helps!!
[ July 16, 2008: Message edited by: sri pathi ]
sri pathi
Greenhorn

Joined: Jul 15, 2008
Posts: 28
Originally posted by Bear Bibeault:

There is no innerhtml property. As I posted, it's innerHTML.


I have used innerHTML only. It's a typo on my part here! :-p
[ July 16, 2008: Message edited by: sri pathi ]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61434
    
  67

Please be sure to use UBB code tags when posting code to the forums. Unformatted code is extremely hard to read and many people that might be able to help you will just move along. Please read this for more information.

You can go back and change your post to add code tags by clicking the .
sri pathi
Greenhorn

Joined: Jul 15, 2008
Posts: 28
Originally posted by Bear Bibeault:
Please be sure to use UBB code tags when posting code to the forums. Unformatted code is extremely hard to read and many people that might be able to help you will just move along. Please read this for more information.

You can go back and change your post to add code tags by clicking the .


Sorry about that! But i've finally made it work!! Thanks for all your time
Tina Ma
Ranch Hand

Joined: Nov 29, 2007
Posts: 198
what did you do to make it work?


Tina
SCJP 1.4, SCWCD 1.4
sri pathi
Greenhorn

Joined: Jul 15, 2008
Posts: 28
Originally posted by sreerupa basu:
what did you do to make it work?


i had the js code in the jsp called from onload method of body tag and also corrected a typo!
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: javascript to insert table and its data into html div tag