6 Replies - 740 Views - Last Post: 31 August 2010 - 08:23 PM

#1 tsackey  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 48
  • Joined: 11-March 10

Simple javascript question

Posted 30 August 2010 - 05:54 PM

Am trying to read cell data from a table and am getting null, below is a snippet of my code.

	day = 1;
	   
	while(day <= actualDaysInMonth)
	{
	    cell = document.createElement("td");
	    cellText = document.createTextNode(day);
	    day++;
	    dayCount++;
	    if(dayCount > 7)
	    {
		row = document.createElement("tr");
		dayCount = 1;
    
	    }
	    cell.appendChild(cellText);
	    cell.setAttribute('onclick',"alert(g_cal.clicked());"); <--here is the issue	    
	    row.appendChild(cell);
	    tblBody.appendChild(row);
	}
	tbl.appendChild(tblBody);
	body.appendChild(tbl);
	tbl.setAttribute("border", "1");
    }



g_cal holds a reference to the calendar and clicked is a prototype function and all it does it return cell.nodeValue;
I moved the setAttribute to different areas in the while loop but still get the same result, please help. I am new to javascript.

Is This A Good Question/Topic? 0
  • +

Replies To: Simple javascript question

#2 CTphpnwb  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 2834
  • View blog
  • Posts: 9,740
  • Joined: 08-August 08

Re: Simple javascript question

Posted 30 August 2010 - 07:22 PM

Are you using IE? If so, try a modern browser because IE will not work well with tables.
Was This Post Helpful? 0
  • +
  • -

#3 Mike007  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 7
  • View blog
  • Posts: 332
  • Joined: 30-August 07

Re: Simple javascript question

Posted 30 August 2010 - 07:41 PM

If you want to construct modify the HTML using javascript you would usually be working with Element.innerHTML property. By constructing an html string on the fly and then assigning the html to innerHTML property on the element on the page you would want to change. Constructing a table using the DOM is quite slow, plus you can save yourself some work by using it when getting an ajax response formated as HTML.

Something like:
var i;
var html = "";

for(i = 0; i < data.length; i++)
{
    html += "<tr>\n";
    html += "    <td>\n";
    .
    .
    html += "    </td>\n";
    html += "<tr>\n";
}

document.getElementById("myDiv").innerHTML = html;



Some people would tell you not to use innerHTML because it is non-standard, but all browsers end up implementing this anyway.

I personally use it to add new complex elements, modifying existing elements by going through the dom (e.g. adding an event handler).
Was This Post Helpful? 0
  • +
  • -

#4 tsackey  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 48
  • Joined: 11-March 10

Re: Simple javascript question

Posted 30 August 2010 - 07:41 PM

View PostCTphpnwb, on 30 August 2010 - 06:22 PM, said:

Are you using IE? If so, try a modern browser because IE will not work well with tables.


Thanks for your response but,I am using firefox.
Was This Post Helpful? 0
  • +
  • -

#5 tsackey  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 48
  • Joined: 11-March 10

Re: Simple javascript question

Posted 30 August 2010 - 08:04 PM

View PostMike007, on 30 August 2010 - 06:41 PM, said:

If you want to construct modify the HTML using javascript you would usually be working with Element.innerHTML property. By constructing an html string on the fly and then assigning the html to innerHTML property on the element on the page you would want to change. Constructing a table using the DOM is quite slow, plus you can save yourself some work by using it when getting an ajax response formated as HTML.

Something like:
var i;
var html = "";

for(i = 0; i < data.length; i++)
{
    html += "<tr>\n";
    html += "    <td>\n";
    .
    .
    html += "    </td>\n";
    html += "<tr>\n";
}

document.getElementById("myDiv").innerHTML = html;



Some people would tell you not to use innerHTML because it is non-standard, but all browsers end up implementing this anyway.

I personally use it to add new complex elements, modifying existing elements by going through the dom (e.g. adding an event handler).


I started this way but I was having trouble changing the cell data dynamically so, i decided to try the dom instead. I am try to organize my code into a classes, your call to innerHTML will this be done within the class or within the body tag in the Html document cos i tried both ways and it does show the table. Am sorry but I am very new to web development.
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3393
  • View blog
  • Posts: 9,591
  • Joined: 08-June 10

Re: Simple javascript question

Posted 31 August 2010 - 12:10 AM

bear in mind that .innerHTML is read-only on table elements in IE.
Was This Post Helpful? 1
  • +
  • -

#7 Mike007  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 7
  • View blog
  • Posts: 332
  • Joined: 30-August 07

Re: Simple javascript question

Posted 31 August 2010 - 08:23 PM

View Posttsackey, on 30 August 2010 - 07:04 PM, said:

View PostMike007, on 30 August 2010 - 06:41 PM, said:

If you want to construct modify the HTML using javascript you would usually be working with Element.innerHTML property. By constructing an html string on the fly and then assigning the html to innerHTML property on the element on the page you would want to change. Constructing a table using the DOM is quite slow, plus you can save yourself some work by using it when getting an ajax response formated as HTML.

Something like:
var i;
var html = "";

for(i = 0; i < data.length; i++)
{
    html += "<tr>\n";
    html += "    <td>\n";
    .
    .
    html += "    </td>\n";
    html += "<tr>\n";
}

document.getElementById("myDiv").innerHTML = html;



Some people would tell you not to use innerHTML because it is non-standard, but all browsers end up implementing this anyway.

I personally use it to add new complex elements, modifying existing elements by going through the dom (e.g. adding an event handler).


I started this way but I was having trouble changing the cell data dynamically so, i decided to try the dom instead. I am try to organize my code into a classes, your call to innerHTML will this be done within the class or within the body tag in the Html document cos i tried both ways and it does show the table. Am sorry but I am very new to web development.


When you say class you are referring to the programming class construct as found in Java, C++ and most OOP languages? Javascript does not have classes just as simple as that. So I would assume you mean the css notion of a style class. I normally use ids for elements I want to interact with so for example:
<div id="myDiv">My content</div>



You cannot do it for a table tag, because like mentioned before the innerHTML of a table is read-only in IE. But you can use the innerHTML property on the div that contains the table.

I would recommend you read Javascript: The Good Parts by Douglas Crockford to learn more about Javascript. I have been doing web-development for years now, but after I heard his one of his speeches I felt that maybe I really never got Javascript. There are a lot of videos by him online, just try a simple google search.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1