Win a copy of Think Java: How to Think Like a Computer Scientist this week in the Java in General forum!
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

javascript to insert table and its data into html div tag

 
sri pathi
Greenhorn
Posts: 28
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64829
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Hints: you can locate an element with document.getElementById(), and you can insert HTML into an element by setting its innerHTML property.
 
sri pathi
Greenhorn
Posts: 28
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 15385
6
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64829
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Originally posted by sri pathi:
i've tried using innerhtml

There is no innerhtml property. As I posted, it's innerHTML.
 
sri pathi
Greenhorn
Posts: 28
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 28
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 64829
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 28
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 198
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
what did you do to make it work?
 
sri pathi
Greenhorn
Posts: 28
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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!
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic