I’ve decided to mess around with javascript a little and see what I can do to a page dynamically. I’m not doing this gratuitously, but maybe the way I go about seems.. hackish.

Starting simple…. see what we can do about messing with tables. I’d like to be able to manipulate tables from the browser.. adding rows, deleting rows, setting styles, and so forth.

Sometimes it is hard to know where to start. The best reference,though, is the SOURCE. use the source. developer.mozilla.org. I’ve looked at other references, but they aren’t that good. I Love Jack Daniels has good cheat sheets, but its not comprehensive and actually using it in code is problematic. For example, have a look at his javascript cheat sheet (very nice) and try to find {table}.insertRow(); you won’t find it. Well… its part of the DOM, not exactly javascript. But javascript is basically the only way we can get to the DOM to manipulate it. Soooo…

I’ve decided the way to play with javascript is the firebug console. That way we get immediate feedback (or not) about what we’re doing. I guess the error console works too. The downside is that you don’t get command completion, but… I guess that is asking for a lot (!).

First attempt: adding a row to table.

there seem to be a couple of ways to add a row to the table. .appendChild and .insertRow.

.appendChild adds a row to the end of the table, .insertRow adds a row at the index we include ie… table.insertRow(index);

Lets have a go.

>>> mytable = document.getElementById(”tbl_dayview”);

<table id=”tbl_dayview” class=”ev_table” width=”100%” cellspacing=”0” cellpadding=”5” align=”center“>

>>> myrow = document.getElementById(”dc0800″);

<td id=”dc0800” class=”ev_row_yellow” cols=”” room=”” doctor=”” livesite=”http://localhost/dental” end_time=”08:30” start_time=”08:00” day=”16” month=”01” year=”2008“>

>>> newrow = document.createElement(”TR”);

<tr>

>>> newd1 = document.createElement(”TD”);

<td>

>>> newd2 = document.createElement(”TD”);

<td>

>>> newd1.appendChild(document.createTextNode(”col1″);

missing ) after argument list

newd1.appendChild(document.createTextNode(”col1″);

javascript: with … (line 1)

>>> newd1.appendChild(document.createTextNode(”col1″));

“col1″

>>> newd2.appendChild(document.createTextNode(”col2″));

“col2″

>>> newrow.appendChild(newd1);

<td>

>>> newrow.appendChild(newd2);

<td>

>>> mytable.insertRow(newrow);

<tr>

>>> mytable.appendChild(newrow);

<tr>

>>> mytable.insertRow(2);

<tr>

>>> newrow = mytable.insertRow(1);

<tr>

>>> newrow.appendChild(newd2);

<td>

>>> newrow.appendChild(newd1);

<td>

>>> newd1.style=”ev_td_left”;

setting a property that has only a getter

undefined javascript: with … (line 1)

>>> newd1.style.classname=”ev_td_left”;

“ev_td_left”

>>> newd1.setAttribute(”class”,”ev_row_yellow”);

ok.. next session I’ll comment the above.