[SOLVED] Attach a table to another table with table object model

proggR · April 18, 2009

I'm trying to build an AJAX based calender but I'm getting stuck before I even get to the harder parts.

I have a year table for the months to be inserted in (it isn't using TOM yet) and I have another set of tables created with TOM for the days in the month. The days part is working but they are printed outside of the year table. I don't know how to describe exactly whats happening so I'm going to paste the code so you can see where I'm at.

Just as a warning, this code is a mess right now because I'm revamping an older project I did that had almost everything hardcoded except the parts I've switched to using the TOM. Sorry to be a pain and just dump code on here but I'm not sure how to describe whats happening.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<!--  
    Name:
    Description:  
-->

<script type="text/javascript">
    /* <![CDATA[ */
    var lastDay=1;
    function displayMonth(month){
    var row,end,day=1, ctr=1;
   
    switch (month){
    case "September": case "April": case "June": case "November": 
    end=30;
    break;
    case "February": 
    end=28; 
    break;
    default:
    end=31;}
    
    var oTable = document.createElement("table");
    document.body.appendChild(oTable);
    var oTHead = oTable.createTHead();
    var oTFoot = oTable.createTFoot();
    var oTBody = document.createElement("tbody");
    oTable.appendChild(oTBody);
    var oRow, oCell, i;	
    oTHead.innerHTML = month;
    oRow = oTBody.insertRow(-1);
    alert("made it past declaring the objects");
    
    oCell = oRow.insertCell(-1);	
    oCell.innerHTML = "S";
    oCell = oRow.insertCell(-1);	
    oCell.innerHTML = "M";   
    oCell = oRow.insertCell(-1);	
    oCell.innerHTML = "T";   
    oCell = oRow.insertCell(-1);	
    oCell.innerHTML = "W";   
    oCell = oRow.insertCell(-1);	
    oCell.innerHTML = "T";   
    oCell = oRow.insertCell(-1);	
    oCell.innerHTML = "F";   
    oCell = oRow.insertCell(-1);	
    oCell.innerHTML = "S";   


    while(day<end){
    	oRow = oTBody.insertRow(-1);
    	while (ctr<lastDay){
    		oCell = oRow.insertCell(-1);	
    		ctr++;
    	}
    	for(ctr=lastDay;ctr<=7;ctr++){
    	oCell = oRow.insertCell(-1);	
    	oCell.innerHTML = day;
    	day++;
    	lastDay=1;
    
    	if (day>end){
    		lastDay=ctr+1;
    		break;
    	}
    
    	}
    
    }
    
}

  function getDate(month,day){
  
  }    
  
  function displayAppt(month, day){
 var hour;
 document.write("<table border='1'><tr><td colspan='2'>"+month+" "+day+", 2009</td></tr>");
   for (hour=8;hour<=18;hour++){
   document.write("<tr><td width='20'>"+hour+":00</td><td></td></tr>");  
   document.write("<tr><td width='20'>"+hour+":30</td><td></td></tr>");
}
document.write("</table>");
}

    
    /* ]]> */        
</script>

<link rel="Stylesheet" href="style.css" />

<title>
Tables and Calendars
</title>

</head>

<body>
<table border='1'>
<tr><td colspan='4'>2009</td><td>Appointments</td></tr>
<tr><td><script type="text/javascript">displayMonth("January");</script></td><td><script type="text/javascript">displayMonth("February");</script></td><td><script type="text/javascript">displayMonth("March");</script></td><td><script type="text/javascript">displayMonth("April");</script></td><td colspan='2' rowspan='3'><script type="text/javascript">displayAppt('January',;</script></td></tr>
<tr><td><script type="text/javascript">displayMonth("May");</script></td><td><script type="text/javascript">displayMonth("June");</script></td><td><script type="text/javascript">displayMonth("July");</script></td><td><script type="text/javascript">displayMonth("August");</script></td></tr>
<tr><td><script type="text/javascript">displayMonth("September");</script></td><td><script type="text/javascript">displayMonth("October");</script></td><td><script type="text/javascript">displayMonth("November");</script></td><td><script type="text/javascript">displayMonth("December");</script></td></tr>
</table>
</body>

</html>

Thank you in advance for any help you can provide. I'm going to keep toying with it myself as well.

proggR · April 19, 2009

I switched the outer table to use the TOM as well and then used cell.appendChild(innerTable) to place the inner table in the cell. Then in the inner table's function I add return oTable return the table as an object to the outer table. It works now and I've cleaned things up a bit. On to the AJAX part.

Sign In

[SOLVED] Attach a table to another table with table object model

Recommended Posts

proggR

Link to comment

Share on other sites

proggR

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information