SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ajax Calendar - Replacing Table Data

    Hi,
    I coded a calendar for my new blog; basically a <table> shows the days of the current month and highlights the days in which an article has been submitted in the blog.

    I have 2 buttons to switch between months, so I need to replace the entire table with javascript.

    I am familiar with database interaction with javascript, so retrieving new values for the next/previous months is not a problem for me.

    Can you please briefly tell me how to update cells in a <table> with HTML DOM using nodes not innerHTML.

    Thanks.

    Let me give an example to make this easier:
    Code HTML4Strict:
    <table id="my_table">
    	<tr><td>Italy</td><td>Rome</td></tr>
    	<tr><td>France</td><td>Paris</td></tr>
    </table>
    Now, how to replace the data above with Spain / Madrid and Russia / Moscow for instance? Keep in mind, I may need to remove all rows and insert new set of rows in my actual table.

    Edit:

    I have just found a related thread http://www.sitepoint.com/forums/showthread.php?t=565309 but replies still appreciated

  2. #2
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    661
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I have already coded it and will share the relevant part of my code:

    Code JavaScript:
    var entrydays;
    var global_year;
    var global_month;
     
    function refresh_calendar() {
    		/*
    			the calendar is basically a <table> with
    			<thead> (7 weekdays)
    			<tfoot>  (displays the current year, month and links to switch between months)
    			and <tbody> (days in month)
    		*/
     
    		// dates are stored in a <tbody> element with id "myTable"
    		var theTable = document.getElementById("myTable");
     
    		//deletes the current <tbody>
    		rowcount=theTable.rows.length;
    		for(var i = 0; i < rowcount; i++) {
    			theTable.deleteRow(0);
    		}
     
    		// these values are actually retrieved from the database
    		var startWeekday=5;
    		var daysinMonth=30;
    		global_year='2008';
    		global_month='09';
    		entrydays='(5)(7)(8)(22)(15)(23)';
     
    		// insert new dates in <tbody> element
    		var cells=new Array();
    		var i=0;
     
    		for (i=0;i<startWeekday;i++) {
    			cells[i]=' '; //empty weekdays in first week of the month
    		}
    		for (var j=1;j<=daysinMonth;j++) {
    			cells[i++]=j;
    			if (i==7) {
    				addRow (cells, theTable); //add a new week (each week is a row)
    				i=0;
    				cells.length=0;
    			}
    		}
    		if (i>0) { addRow (cells, theTable); } //add remaining days (or the last week)
     
    		// some code will be added here to update the displayed year, month in <tfoot>
    		//
    		//
     
    }
     
    function addRow(cells, table) {
      var tr = document.createElement ('tr');
      for (var i=0,cell_length=cells.length; i<cell_length; i++) {
        var td = document.createElement ('td');
     
    	//check if any articles entered in this day and insert a link if so
    	if (entrydays.indexOf('('+cells[i]+')')!=-1) {
    		var anchor = document.createElement("a");
    		anchor.appendChild (document.createTextNode (cells[i]));
    		var tempday = (cells[i]<10) ? '0'+cells[i] : cells[i];
    		anchor.href = '/date/'+global_year+'/'+global_month+'/'+tempday; //construct the link
    		td.appendChild (anchor);
    		td.className='full-day'; //add a class attribute to highlight the day with css
    	}
    	 else {
    		td.appendChild (document.createTextNode (cells[i]));
    	 }
     
    	tr.appendChild (td);
      }
      table.appendChild (tr);
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •