<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	>

<channel>
	<title>Volodymyr Osypov blog</title>
	<atom:link href="http://blog.aurorascorpio.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.aurorascorpio.com</link>
	<description>Web Developer's blog</description>
	<pubDate>Tue, 17 Jun 2008 21:00:33 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.5</generator>
	<language>en</language>
			<item>
		<title>Firefox 3 Download Day!!!</title>
		<link>http://blog.aurorascorpio.com/2008/06/17/firefox-3-download-day/</link>
		<comments>http://blog.aurorascorpio.com/2008/06/17/firefox-3-download-day/#comments</comments>
		<pubDate>Tue, 17 Jun 2008 21:00:33 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Uncategorized]]></category>

		<category><![CDATA[browser]]></category>

		<category><![CDATA[download day]]></category>

		<category><![CDATA[firefox 3]]></category>

		<category><![CDATA[record]]></category>

		<guid isPermaLink="false">http://blog.aurorascorpio.com/?p=31</guid>
		<description><![CDATA[Hooray!
My fave browser new version is finally out!
http://www.spreadfirefox.com/en-US/worldrecord
Download Day is here!
Set a Guinness World Record
Enjoy a Better Web
Sounds like a good deal, right? All you have to do to help us set the record for the most software downloaded in 24 hours is get Firefox 3 now – it’s that easy. We&#8217;re not asking you [...]]]></description>
			<content:encoded><![CDATA[<p>Hooray!<br />
My fave browser new version is finally out!</p>
<p><a href="http://www.spreadfirefox.com/en-US/worldrecord">http://www.spreadfirefox.com/en-US/worldrecord</a></p>
<p>Download Day is here!<br />
Set a Guinness World Record<br />
Enjoy a Better Web</p>
<p>Sounds like a good deal, right? All you have to do to help us set the record for the most software downloaded in 24 hours is get Firefox 3 now – it’s that easy. We&#8217;re not asking you to swallow a sword or to balance 30 spoons on your face, although that would be kind of awesome.</p>
<p>Please download Firefox 3 by 17:00 UTC on June 18, 2008. That&#8217;s 10:00 a.m. in Mountain View, 1:00 p.m. in Toronto, 2:00 p.m. in Rio de Janeiro, 7:00 p.m. in Paris, Madrid, Berlin, Rome and Warsaw, 9:00 p.m. in Moscow, and June 19, 2008 at 1:00 a.m. in Beijing and 2:00 a.m. in Tokyo.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.aurorascorpio.com/2008/06/17/firefox-3-download-day/feed/</wfw:commentRss>
		</item>
		<item>
		<title>SVN - quick start tutorial</title>
		<link>http://blog.aurorascorpio.com/2008/06/03/svn-quick-start/</link>
		<comments>http://blog.aurorascorpio.com/2008/06/03/svn-quick-start/#comments</comments>
		<pubDate>Tue, 03 Jun 2008 10:02:26 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Soft and Programming]]></category>

		<category><![CDATA[cvs]]></category>

		<category><![CDATA[subversion]]></category>

		<category><![CDATA[svn]]></category>

		<category><![CDATA[version control systems]]></category>

		<guid isPermaLink="false">http://blog.aurorascorpio.com/?p=30</guid>
		<description><![CDATA[Recently I&#8217;ve decided finally to learn to work with version control systems and selected SVN (Subversion). It was actually installed already on my Linux Fedora, but you can easily install it to your Fedora system using yum install subversion or just find RPM or DEB of subversion package.
Now I want to share with youthis little [...]]]></description>
			<content:encoded><![CDATA[<p>Recently I&#8217;ve decided finally to learn to work with version control systems and selected SVN (Subversion). It was actually installed already on my Linux Fedora, but you can easily install it to your Fedora system using <code>yum install subversion</code> or just find RPM or DEB of subversion package.</p>
<p>Now I want to share with youthis little quick start guide and won&#8217;t tell you what SVN is and it&#8217;s whole description.<br />
I have a PHP project in <nobr>/var/www/html/docs/haibuy</nobr>. And Apache has Virtualhost haibuy. My IP in LAN is 192.168.1.7.<br />
<span id="more-30"></span><br />
So now we need to create &#8216;repository&#8217; where our projects will &#8216;live&#8217;. We can create just one repository for all projects. So I&#8217;ve created /svn directory. And then run a command:</p>
<pre>svnadmin create /svn/repository</pre>
<p>And got repository subdirectory in /svn with its subdirectories structer.</p>
<p>Now we need to import a project to our repository. To use all the features of SVN including branches, merging branches we should create our project directories structure like this:</p>
<pre>
/path/to/project
          |- trunk
          |- branches
          |- tags
</pre>
<p><i>trunk</i> must have you project files.<br />
Now we need to import our project to repository:</p>
<pre>svn import /path/to/project file:///path/to/repos/project -m "Comment"</pre>
<p>In my case it was:</p>
<pre>svn import /var/www/html/docs/haibuy file:///svn/repository/haibuy -m "Comment: initial import"</pre>
<p>Now we can delete our project from <nobr>/var/www/html/docs/haibuy</nobr> (or if you&#8217;re afraid just rename it).<br />
To work with SVN as client I use Eclipse with Subclipse plugin.<br />
I also use PHP nightly plugin for it. To install them both run Eclipse. Then go to <nobr>&#8220;Help->Software Apdates->Find and install&#8221;<nobr>, select &#8220;Search for new freatures to install&#8221; add &#8220;New remote site&#8230;&#8221; &#8220;PHPEclipse Nightly&#8221; with URL: <br /><nobr>http://update.phpeclipse.net/update/nightly</nobr> and &#8220;Subclipse&#8221; with URL: <br /><nobr>http://subclipse.tigris.org/update_1.2.x.</nobr> After that Subclipse and PHP Eclipse will be installed. Reopen your Eclipse and go to <nobr>Window->Open Perspective->Other&#8230;</nobr> select PHP. Now you have nice PHP environment. Let&#8217;s create new project &#8216;haibuy&#8217;: <nobr>New->Project->SVN->Checkout Projects from SVN</nobr>. Create a new repository location. As our repository is on the same machine we can add it using such repository location: <nobr>file:///svn/repository/haibuy/trunk</nobr>. Then &#8220;Next&#8221;, select the top folder againt &#8220;Next&#8221;, and select where to save your work copy. I typed in: <nobr>/var/www/html/docs/haibuy</nobr>, so my working copy is on &#8220;web-server&#8221;.<br />
Now you can use Team submenu in context menu (right mouse click on project or project files) to work with SVN. To get the latest version from repository use Team->Update. To confirm your changes and upload them to the repository use Team->Commit&#8230;</p>
<p>Now we need to make our repository reachable from other machines. We need to open Firewall and add 3690 port TCP protocol in &#8216;Other Ports&#8217; section. Also we can check 80 port in &#8216;Trusted Services&#8217; to make our http://haibuy available over the LAN.<br />
After that we have to start demon, which will listen to the 3690 port and allow to work remotly with SVN.</p>
<pre>svnserve -d</pre>
<p>Now you can work with repository from other machines. path in my case: <nobr>svn://192.168.1.7/svn/repository/haibuy/trunk</nobr></p>
<p>Other developer is working under Windows XP and he uses TortoiseVPN client. Everything works fine.</p>
<p>P.S.: to check if your 3690 port is open and svnserve demon started run shell command &#8220;telnet 192.168.1.7 3690&#8243; from other machine.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.aurorascorpio.com/2008/06/03/svn-quick-start/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Bukovynian &#8220;business&#8221;</title>
		<link>http://blog.aurorascorpio.com/2008/05/27/bukovynian-business/</link>
		<comments>http://blog.aurorascorpio.com/2008/05/27/bukovynian-business/#comments</comments>
		<pubDate>Tue, 27 May 2008 12:58:41 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Uncategorized]]></category>

		<category><![CDATA[copyright]]></category>

		<category><![CDATA[internet]]></category>

		<category><![CDATA[law]]></category>

		<guid isPermaLink="false">http://blog.aurorascorpio.com/?p=29</guid>
		<description><![CDATA[Business in my header is in upper comas, because the way that some firms treat with web-developers is at least not ethic. I don&#8217;t want to offend such beautiful place as Bukovyna, I think this can be anywhere, but two cases, which I was involved in were connected with the co-working with such firms, which [...]]]></description>
			<content:encoded><![CDATA[<p>Business in my header is in upper comas, because the way that some firms treat with web-developers is at least not ethic. I don&#8217;t want to offend such beautiful place as Bukovyna, I think this can be anywhere, but two cases, which I was involved in were connected with the co-working with such firms, which were based in Chernivtsi.<br />
In both cases client (according to himself) had lack of money, they were praying to make websites for them for not a big price, but requirements and permanent specifications were of the level of company, which pays well.</p>
<p>One ofthe two websites I made long ago, using only HTML, I updated it few times and it was my copyright text with e-mail address in the bottom of the page.<br />
That&#8217;s it: <noindex><a href="http://www.legenda.com.ua" rel="nofollow">www.legenda.com.ua</a></noindex><br />
As you see now, my copyright is deleted, now there is:<br />
Webmaster: Hodan B.I. , Site support<br />
But this &#8220;webmaster&#8221; is lazy or non-competent, cuz when we look at the source we see in &lt;head&gt;&#8230;&lt;/head&gt; :<br />
&lt;meta name=&#8221;author&#8221; content=&#8221;Osipov Vladimir&#8221;&gt;</p>
<p>Second website was developed by the <noindex><a href="http://www.olvia.net.ua" rel="nofollow">&#8220;Olvia&#8221;</a></noindex> webstudio, where I used to work.<br />
It is located here <noindex><a href="http://www.migovo.com.ua" rel="nofollow">www.migovo.com.ua</a></noindex>.<br />
When we created it there was link to Olvia&#8217;s website, but now we see &#8220;B y  M a x w e l l   V a z o v s k y&#8221; in the footer. Who is this one? - hell knows. Maximum work he did was changing some texts - and I doubt it gives him rights to tell that this website was created by him. And he was also lazy or just didn&#8217;t know, that in &lt;head&gt;&#8230;&lt;/head&gt; is<br />
&lt;meta name=&#8221;author&#8221; content=&#8221;Olvia Group&#8221;&gt;<br />
and no Maxwells mentioned there.</p>
<p>I&#8217;ve mentioned this when recently one friend of mine asked me to have a look at these websites and prepare the commercial proposal for SEO service. When I looked at &#8220;old&#8221; well known for me pages I was embarassed by impudence and disagreed to co-work with them again. Of course it can be that the bosses don&#8217;t know about this, perhaps they just asked these &#8220;Maxwells&#8221; to change something on websites, and these &#8220;Maxwells&#8221; decided that now they have rights to call themselves &#8220;The Creators&#8221;. Well if they do this to someone, then someone will do this to them&#8230; sooner or later&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.aurorascorpio.com/2008/05/27/bukovynian-business/feed/</wfw:commentRss>
		</item>
		<item>
		<title>HTML DOM, JavaScript to add/remove table rows (part 2)</title>
		<link>http://blog.aurorascorpio.com/2008/05/23/html-dom-javascript-to-addremove-table-rows-part-2/</link>
		<comments>http://blog.aurorascorpio.com/2008/05/23/html-dom-javascript-to-addremove-table-rows-part-2/#comments</comments>
		<pubDate>Fri, 23 May 2008 13:01:38 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[JavaScript]]></category>

		<category><![CDATA[dom]]></category>

		<guid isPermaLink="false">http://blog.aurorascorpio.com/?p=28</guid>
		<description><![CDATA[I've promised you to improve table row delete function, that's what we will do today. So now we know the differences of DOM tree in different browsers. We saw that Firefox and Safari create additional text node "\n" so there are two ways to fix our delete row function: 1st - to delete these nodes, [...]]]></description>
			<content:encoded><![CDATA[<p>I've promised you to improve <a href="http://blog.aurorascorpio.com/2008/05/20/html-dom-javascript-to-addremove-table-rows-part-1/">table row delete function</a>, that's what we will do today. So now we know the <a href="http://blog.aurorascorpio.com/2008/05/21/print-html-dom-tree/">differences of DOM tree in different browsers</a>. We saw that Firefox and Safari create additional text node "\n" so there are two ways to fix our delete row function: 1st - to delete these nodes, 2nd - just to pass them through.<br />
<span id="more-28"></span><br />
1. Deleting "\n"</p>
<div class="igBar"><span id="ljavascript-4"><a href="#" onclick="javascript:showPlainTxt('javascript-4'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-4">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> DelLastRow<span style="color: #66cc66;">&#40;</span>tid<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> myTbl=document.<span style="color: #006600;">getElementById</span><span style="color: #66cc66;">&#40;</span>tid<span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> deltr=myTbl.<span style="color: #006600;">lastChild</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000066; font-weight: bold;">while</span> <span style="color: #66cc66;">&#40;</span>deltr.<span style="color: #006600;">nodeType</span>==<span style="color: #CC0000;color:#800000;">3</span><span style="color: #66cc66;">&#41;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;<span style="color: #66cc66;">&#123;</span> myTbl.<span style="color: #006600;">removeChild</span><span style="color: #66cc66;">&#40;</span>deltr<span style="color: #66cc66;">&#41;</span>; </div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp;deltr=myTbl.<span style="color: #006600;">lastChild</span>; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">myTbl.<span style="color: #006600;">removeChild</span><span style="color: #66cc66;">&#40;</span>deltr<span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>2. Passing "\n" through</p>
<div class="igBar"><span id="ljavascript-5"><a href="#" onclick="javascript:showPlainTxt('javascript-5'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-5">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> DelLastRow<span style="color: #66cc66;">&#40;</span>tid<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> myTbl=document.<span style="color: #006600;">getElementById</span><span style="color: #66cc66;">&#40;</span>tid<span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> deltr=myTbl.<span style="color: #006600;">lastChild</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000066; font-weight: bold;">while</span> <span style="color: #66cc66;">&#40;</span>deltr.<span style="color: #006600;">nodeType</span>==<span style="color: #CC0000;color:#800000;">3</span><span style="color: #66cc66;">&#41;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;<span style="color: #66cc66;">&#123;</span> deltr=deltr.<span style="color: #006600;">previousSibling</span>; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">myTbl.<span style="color: #006600;">removeChild</span><span style="color: #66cc66;">&#40;</span>deltr<span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>In last function we used previousSibling - this is the reference value to the previous neighbor node, you can also use nextSibling to go to the next neighbor node. Actually in DOM printing function we could make another cycle: 'while' instead of 'for':</p>
<div class="igBar"><span id="ljavascript-6"><a href="#" onclick="javascript:showPlainTxt('javascript-6'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-6">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000066; font-weight: bold;">while</span> <span style="color: #66cc66;">&#40;</span>cur<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">...</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #006600;">cur</span>=cur.<span style="color: #006600;">nextSibling</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.aurorascorpio.com/2008/05/23/html-dom-javascript-to-addremove-table-rows-part-2/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Manchester United - champions</title>
		<link>http://blog.aurorascorpio.com/2008/05/22/manchester-united-champions/</link>
		<comments>http://blog.aurorascorpio.com/2008/05/22/manchester-united-champions/#comments</comments>
		<pubDate>Thu, 22 May 2008 09:15:43 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Uncategorized]]></category>

		<category><![CDATA[champions league]]></category>

		<category><![CDATA[football]]></category>

		<category><![CDATA[manchester united]]></category>

		<category><![CDATA[sport]]></category>

		<guid isPermaLink="false">http://blog.aurorascorpio.com/?p=27</guid>
		<description><![CDATA[Yahoo! that's it! Manchester United won champion's league 07/08! That means that Chelsea are double runner-up this season and England Premiership and Champions League prizes are in Red devils' pocket  
Penalty lottery was really nervous, but I knew Anelka won't score, better they'd let Shevchenko play.

Photo by Reuters
]]></description>
			<content:encoded><![CDATA[<p>Yahoo! that's it! Manchester United won champion's league 07/08! That means that Chelsea are double runner-up this season and England Premiership and Champions League prizes are in Red devils' pocket <img src='http://blog.aurorascorpio.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
<p>Penalty lottery was really nervous, but I knew Anelka won't score, better they'd let Shevchenko play.</p>
<p><a href='http://blog.aurorascorpio.com/wp-content/uploads/2008/05/350-7.jpg'><img src="http://blog.aurorascorpio.com/wp-content/uploads/2008/05/350-7-300x214.jpg" alt="" title="350-7" width="300" height="214" class="alignnone size-medium wp-image-26" /></a><br />
Photo by Reuters</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.aurorascorpio.com/2008/05/22/manchester-united-champions/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Print HTML DOM Tree</title>
		<link>http://blog.aurorascorpio.com/2008/05/21/print-html-dom-tree/</link>
		<comments>http://blog.aurorascorpio.com/2008/05/21/print-html-dom-tree/#comments</comments>
		<pubDate>Wed, 21 May 2008 09:14:41 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[JavaScript]]></category>

		<category><![CDATA[dom]]></category>

		<category><![CDATA[html]]></category>

		<guid isPermaLink="false">http://blog.aurorascorpio.com/?p=25</guid>
		<description><![CDATA[In previous article we programmed two functions: to add and remove a table row. But we had one issue in Safari and Firefox by removing a row. We had to click Delete button twice. To understand why this happens we need to see the DOM tree of our table, which each browser builds. You can [...]]]></description>
			<content:encoded><![CDATA[<p>In <a href="http://blog.aurorascorpio.com/2008/05/20/html-dom-javascript-to-addremove-table-rows-part-1/">previous article</a> we programmed two functions: to add and remove a table row. But we had one issue in Safari and Firefox by removing a row. We had to click Delete button twice. To understand why this happens we need to see the DOM tree of our table, which each browser builds. You can use browser plugins, but now we will just develop our own simple JavaScript function to print DOM tree.<br />
<span id="more-25"></span><br />
Our function will get the reference to an element and we can run it in this way:<br />
<script type="text/javascript">
printDOMTree(document.getElementById('DOMTree'));
</script></p>
<p>You need to know that every node has the property nodeType. If it's an element nodeType=1, it it's a text node (and can not have child nodes) then nodeType=3</p>
<div class="igBar"><span id="ljavascript-10"><a href="#" onclick="javascript:showPlainTxt('javascript-10'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-10">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> printDOMTree<span style="color: #66cc66;">&#40;</span>Mid<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> i; <span style="color: #009900; font-style: italic;">// for cycles</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #000066; font-weight: bold;">for</span> <span style="color: #66cc66;">&#40;</span>i=<span style="color: #CC0000;color:#800000;">0</span>;i&lt;Mid.<span style="color: #006600;">childNodes</span>.<span style="color: #006600;">length</span>;i++<span style="color: #66cc66;">&#41;</span> <span style="color: #009900; font-style: italic;">// go through all childs of our element</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>Mid.<span style="color: #006600;">childNodes</span><span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">nodeType</span>==<span style="color: #CC0000;color:#800000;">1</span><span style="color: #66cc66;">&#41;</span> <span style="color: #009900; font-style: italic;">// if element</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#123;</span> document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'&lt;br /&gt;['</span> + Mid.<span style="color: #006600;">childNodes</span><span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">nodeName</span> + <span style="color: #3366CC;">']'</span> <span style="color: #66cc66;">&#41;</span>; <span style="color: #009900; font-style: italic;">// we will write its name in [name]</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; printDOMTree<span style="color: #66cc66;">&#40;</span>Mid.<span style="color: #006600;">childNodes</span><span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#41;</span>; <span style="color: #009900; font-style: italic;">// and recursively run our function for this element</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp;&nbsp; &nbsp;document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'[/'</span> + Mid.<span style="color: #006600;">childNodes</span><span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">nodeName</span> + <span style="color: #3366CC;">']'</span> <span style="color: #66cc66;">&#41;</span>;&nbsp; <span style="color: #009900; font-style: italic;">// writes element name in [/name]</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>Mid.<span style="color: #006600;">childNodes</span><span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">nodeType</span>==<span style="color: #CC0000;color:#800000;">3</span><span style="color: #66cc66;">&#41;</span> <span style="color: #009900; font-style: italic;">// if it's text</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#123;</span> </div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #66cc66;">&#40;</span>Mid.<span style="color: #006600;">childNodes</span><span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">nodeValue</span>==<span style="color: #3366CC;">'<span style="color: #000099; font-weight: bold;">\n</span>'</span><span style="color: #66cc66;">&#41;</span> <span style="color: #009900; font-style: italic;">// if this text is a pagebreak symbol \n</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#123;</span> document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'&lt;br /&gt;[text:<span style="color: #000099; font-weight: bold;">\\</span>n]&lt;br /&gt;'</span> <span style="color: #66cc66;">&#41;</span>; <span style="color: #66cc66;">&#125;</span> <span style="color: #009900; font-style: italic;">// we will print it as \n just to see it in output</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #000066; font-weight: bold;">else</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #66cc66;">&#123;</span> document.<span style="color: #000066; font-weight: bold;">write</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'&lt;br /&gt;[text:'</span> + Mid.<span style="color: #006600;">childNodes</span><span style="color: #66cc66;">&#91;</span>i<span style="color: #66cc66;">&#93;</span>.<span style="color: #006600;">nodeValue</span> + <span style="color: #3366CC;">']&lt;br /&gt;'</span> <span style="color: #66cc66;">&#41;</span>; <span style="color: #66cc66;">&#125;</span> <span style="color: #009900; font-style: italic;">// else just write the text node</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p>
Now try this code:</p>
<div class="igBar"><span id="lhtml-11"><a href="#" onclick="javascript:showPlainTxt('html-11'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-11">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"DOMTree"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/table.html"><span style="color: #000000; font-weight: bold;">&lt;table</span></a> <span style="color: #000066;">border</span>=<span style="color: #ff0000;">"1"</span> <span style="color: #000066;">cellpadding</span>=<span style="color: #ff0000;">"5"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/tbody.html"><span style="color: #000000; font-weight: bold;">&lt;tbody</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"myT"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">&lt;tr&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample 1<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample text here...<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/tr&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">&lt;tr&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample 2<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample text here...<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/tr&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">&lt;tr&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample 3<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample text here...<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/tr&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">&lt;tr&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample 4<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample text here...<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/tr&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">&lt;tr&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample 5<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample text here...<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/tr&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">&lt;tr&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample 6<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample text here...<span style="color: #009900;"><a href="http://december.com/html/4/element/img.html"><span style="color: #000000; font-weight: bold;">&lt;img</span></a> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">""</span> /<span style="color: #000000; font-weight: bold;">&gt;</span></a></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/tr&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/tbody&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/table&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/script.html"><span style="color: #000000; font-weight: bold;">&lt;script&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">printDOMTree(document.getElementById('DOMTree'));</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/script&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Look the output of the function in different browsers and you will see, that IE and Opera DOM tree is like:<br />
[TABLE]<br />
[TBODY]<br />
[tr]<br />
[TD]<br />
[text:sample 1]<br />
[/TD]<br />
[TD]<br />
[text:sample text here...]<br />
[/TD][/tr]<br />
[tr]<br />
[TD]<br />
[text:sample 2]<br />
[/TD]<br />
[TD]<br />
[text:sample text here...]<br />
[/TD][/tr]</p>
<p>but in Firefox:<br />
[tr]<br />
[TD]<br />
[text:sample 1]<br />
[/TD]<br />
[TD]<br />
[text:sample text here...]<br />
[/TD][/tr]<br />
[text:\n]<br />
[tr]<br />
[TD]<br />
[text:sample 2]<br />
[/TD]<br />
[TD]<br />
[text:sample text here...]<br />
[/TD][/tr]<br />
[text:\n]</p>
<p>We have additional text nodes (\n - pagebreaks) after each &lt;tr&gt;. That's why when we try to delete the last child of <b>tbody</b> in IE we delete the <b>tr</b> element but Firefox we delete text node with "\n" and the second click deletes <b>tr</b> element. Also when we add new row we don't use pagebreaks, that's why it's deleting in a Firefox in one click.</p>
<p>If we'll change the table code to:</p>
<div class="igBar"><span id="lhtml-12"><a href="#" onclick="javascript:showPlainTxt('html-12'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-12">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"DOMTree"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/table.html"><span style="color: #000000; font-weight: bold;">&lt;table</span></a> <span style="color: #000066;">border</span>=<span style="color: #ff0000;">"1"</span> <span style="color: #000066;">cellpadding</span>=<span style="color: #ff0000;">"5"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/tbody.html"><span style="color: #000000; font-weight: bold;">&lt;tbody</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"myT"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">&lt;tr&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample 1<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample text here...<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/tr&gt;</span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">&lt;tr&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample 2<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample text here...<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/tr&gt;</span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">&lt;tr&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample 3<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample text here...<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/tr&gt;</span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">&lt;tr&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample 4<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample text here...<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/tr&gt;</span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">&lt;tr&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample 5<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample text here...<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/tr&gt;</span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">&lt;tr&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample 6<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample text here...<span style="color: #009900;"><a href="http://december.com/html/4/element/img.html"><span style="color: #000000; font-weight: bold;">&lt;img</span></a> <span style="color: #000066;">src</span>=<span style="color: #ff0000;">""</span> /<span style="color: #000000; font-weight: bold;">&gt;</span></a></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/tr&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/tbody&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/table&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>then we won't have such problem. Other way to fix a little bit our delete function. How to make this? Tomorrow you will know <img src='http://blog.aurorascorpio.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.aurorascorpio.com/2008/05/21/print-html-dom-tree/feed/</wfw:commentRss>
		</item>
		<item>
		<title>HTML DOM, JavaScript to add/remove table rows (part 1)</title>
		<link>http://blog.aurorascorpio.com/2008/05/20/html-dom-javascript-to-addremove-table-rows-part-1/</link>
		<comments>http://blog.aurorascorpio.com/2008/05/20/html-dom-javascript-to-addremove-table-rows-part-1/#comments</comments>
		<pubDate>Tue, 20 May 2008 18:33:47 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[JavaScript]]></category>

		<category><![CDATA[dom]]></category>

		<category><![CDATA[html]]></category>

		<category><![CDATA[table]]></category>

		<guid isPermaLink="false">http://blog.aurorascorpio.com/?p=24</guid>
		<description><![CDATA[I hope you know what DOM is. If no, then I would advise you to read first this tutorial.
We will try to write JavaScirpt code to add/remove rows to table but without using DHTML functions (addRow, addCell etc.), we will use functions to manipulate with DOM tree like appendChild, createElement, createTextNode.

so, we have such HTML [...]]]></description>
			<content:encoded><![CDATA[<p>I hope you know what DOM is. If no, then I would advise you to read first <a href="http://www.w3schools.com/HTMLDOM/default.asp" target="_blank" title="HTML DOM tutorial">this tutorial</a>.</p>
<p>We will try to write JavaScirpt code to add/remove rows to table but without using DHTML functions (addRow, addCell etc.), we will use functions to manipulate with DOM tree like appendChild, createElement, createTextNode.<br />
<span id="more-24"></span><br />
so, we have such HTML code:</p>
<div class="igBar"><span id="lhtml-18"><a href="#" onclick="javascript:showPlainTxt('html-18'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-18">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/div.html"><span style="color: #000000; font-weight: bold;">&lt;div</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"DOMTree"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/table.html"><span style="color: #000000; font-weight: bold;">&lt;table</span></a> <span style="color: #000066;">border</span>=<span style="color: #ff0000;">"1"</span> <span style="color: #000066;">cellpadding</span>=<span style="color: #ff0000;">"5"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/tbody.html"><span style="color: #000000; font-weight: bold;">&lt;tbody</span></a> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"myT"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">&lt;tr&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample 1<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample text here...<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/tr&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">&lt;tr&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample 2<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample text here...<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/tr&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/tr.html"><span style="color: #000000; font-weight: bold;">&lt;tr&gt;</span></a></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample 3<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><a href="http://december.com/html/4/element/td.html"><span style="color: #000000; font-weight: bold;">&lt;td&gt;</span></a></span>sample text here...<span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/td&gt;</span></span><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/tr&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/tbody&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/table&gt;</span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/div&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>We want to create a function which will add a row (&lt;tr&gt; ... &lt;/tr&gt;) to the end of our table. The only parameter will be the id of TBODY element:</p>
<div class="igBar"><span id="ljavascript-19"><a href="#" onclick="javascript:showPlainTxt('javascript-19'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-19">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&lt;script type=<span style="color: #3366CC;">"text/javascript"</span>&gt;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> i=<span style="color: #CC0000;color:#800000;">3</span>; <span style="color: #009900; font-style: italic;">// we will use i variable just for names 'sample 4', 'sample 5', ...</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> AddEndRow<span style="color: #66cc66;">&#40;</span>tid<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// first we create &lt;tr&gt; element</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> myTR=document.<span style="color: #006600;">createElement</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'tr'</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// now we create first cell (&lt;td&gt; element)</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> myTD=document.<span style="color: #006600;">createElement</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'td'</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// it will have one child - text node</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">myTD.<span style="color: #006600;">appendChild</span><span style="color: #66cc66;">&#40;</span>document.<span style="color: #006600;">createTextNode</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'sample '</span>+<span style="color: #66cc66;">&#40;</span>++i<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// create second cell, and append the child text node 'sample text here 2...'</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> myTD2=document.<span style="color: #006600;">createElement</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'td'</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">myTD2.<span style="color: #006600;">appendChild</span><span style="color: #66cc66;">&#40;</span>document.<span style="color: #006600;">createTextNode</span><span style="color: #66cc66;">&#40;</span><span style="color: #3366CC;">'sample text here 2 ...'</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// now we append our 2 cells to our table row.</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">myTR.<span style="color: #006600;">appendChild</span><span style="color: #66cc66;">&#40;</span>myTD<span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">myTR.<span style="color: #006600;">appendChild</span><span style="color: #66cc66;">&#40;</span>myTD2<span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// after that we add our row (tr) to tbody</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">document.<span style="color: #006600;">getElementById</span><span style="color: #66cc66;">&#40;</span>tid<span style="color: #66cc66;">&#41;</span>.<span style="color: #006600;">appendChild</span><span style="color: #66cc66;">&#40;</span>myTR<span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&lt;/script&gt; </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Graphically it will be like:</p>
<pre>
1. [myTR]
2. [myTD]
3. [myTD] | -> 'sample '+(++i)
4. [myTD2]
5. [myTD2] | -> 'sample text here 2...'
6. [myTR] | -> [myTD]
7. [myTR] | -> [myTD]
              | -> [myTD2]
8. [tid] (tbody) | -> first row of our table
                      | ....
                      | -> [myTR]
</pre>
<p>Now we can add button, which will run our function:</p>
<div class="igBar"><span id="lhtml-20"><a href="#" onclick="javascript:showPlainTxt('html-20'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-20">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/form.html"><span style="color: #000000; font-weight: bold;">&lt;form</span></a> <span style="color: #000066;">name</span>=<span style="color: #ff0000;">""</span> <span style="color: #000066;">action</span>=<span style="color: #ff0000;">""</span> <span style="color: #000066;">method</span>=<span style="color: #ff0000;">""</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">&lt;input</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"button"</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">"Add row"</span> <span style="color: #000066;">onClick</span>=<span style="color: #ff0000;">"return AddEndRow('myT');"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="color: #000000; font-weight: bold;">&lt;/form&gt;</span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>click on the button and you will see how new rows append to the table <img src='http://blog.aurorascorpio.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /><br />
It works fine in all modern browsers (I've tested on FF 1.5, Safari 3, Opera 9, IE 6+)</p>
<p>Now we need also have function to delete the last row.</p>
<div class="igBar"><span id="ljavascript-21"><a href="#" onclick="javascript:showPlainTxt('javascript-21'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">JAVASCRIPT:</span>
<div id="javascript-21">
<div class="javascript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">function</span> DelLastRow<span style="color: #66cc66;">&#40;</span>tid<span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// myTbl -&gt; reference to our Tbody</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> myTbl=document.<span style="color: #006600;">getElementById</span><span style="color: #66cc66;">&#40;</span>tid<span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// go to the last child of tbody - i.e. the last row</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #003366; font-weight: bold;">var</span> deltr=myTbl.<span style="color: #006600;">lastChild</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900; font-style: italic;">// remove the last row.</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">myTbl.<span style="color: #006600;">removeChild</span><span style="color: #66cc66;">&#40;</span>deltr<span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #66cc66;">&#125;</span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Add a button to the HTML:</p>
<div class="igBar"><span id="lhtml-22"><a href="#" onclick="javascript:showPlainTxt('html-22'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">HTML:</span>
<div id="html-22">
<div class="html">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><a href="http://december.com/html/4/element/input.html"><span style="color: #000000; font-weight: bold;">&lt;input</span></a> <span style="color: #000066;">type</span>=<span style="color: #ff0000;">"button"</span> <span style="color: #000066;">value</span>=<span style="color: #ff0000;">"Delete last row"</span> <span style="color: #000066;">onClick</span>=<span style="color: #ff0000;">"return DelLastRow('myT');"</span><span style="color: #000000; font-weight: bold;">&gt;</span></a></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Try :). There is a little surprise you will have  in Safari and Firefox. You need double click to delete the row, when in Opera and Internet Explorer it works fine. Also you can see, that rows created using our function <i>AddEndRow</i> are removing well in all browsers. Why is it so? Tomorrow I'll tell you... <img src='http://blog.aurorascorpio.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /><br />
to be continued</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.aurorascorpio.com/2008/05/20/html-dom-javascript-to-addremove-table-rows-part-1/feed/</wfw:commentRss>
		</item>
		<item>
		<title>no Google :)</title>
		<link>http://blog.aurorascorpio.com/2008/05/19/no-google/</link>
		<comments>http://blog.aurorascorpio.com/2008/05/19/no-google/#comments</comments>
		<pubDate>Mon, 19 May 2008 20:15:36 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Uncategorized]]></category>

		<category><![CDATA[black metal]]></category>

		<category><![CDATA[concert]]></category>

		<category><![CDATA[fail]]></category>

		<category><![CDATA[gig]]></category>

		<category><![CDATA[google]]></category>

		<category><![CDATA[interview]]></category>

		<category><![CDATA[moscow]]></category>

		<category><![CDATA[satyricon]]></category>

		<category><![CDATA[yahoo]]></category>

		<guid isPermaLink="false">http://blog.aurorascorpio.com/?p=23</guid>
		<description><![CDATA[Just got the response from Google, I haven't passed the first phone interview, so I won't be in Google. It's OK, really UI developer is not exactly what I want. PHP developer position is much better for me.
So, now I'm waiting for Yahoo! answer and really hope things will be fine for Yahoo!  
BTW, [...]]]></description>
			<content:encoded><![CDATA[<p>Just got the response from Google, I haven't passed the first phone interview, so I won't be in Google. It's OK, really UI developer is not exactly what I want. PHP developer position is much better for me.</p>
<p>So, now I'm waiting for Yahoo! answer and really hope things will be fine for Yahoo! <img src='http://blog.aurorascorpio.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>BTW, our www.themetallist.com reached it record visitors count - 2041! <img src='http://blog.aurorascorpio.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /><br />
Mainly thanks to the SATYRICON report from Moscow:</p>
<p><img src="http://www.themetallist.com/gallery/satyricon/19.jpg" alt="SATYRICON in Moscow" /></p>
<p><a href="http://www.themetallist.com/webzine/livereport_247_eng.html" title="SATYRICON in Moscow"></a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.aurorascorpio.com/2008/05/19/no-google/feed/</wfw:commentRss>
		</item>
		<item>
		<title>ARIA in Chernivtsi</title>
		<link>http://blog.aurorascorpio.com/2008/05/19/aria-in-chernivtsi/</link>
		<comments>http://blog.aurorascorpio.com/2008/05/19/aria-in-chernivtsi/#comments</comments>
		<pubDate>Mon, 19 May 2008 08:39:54 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[music]]></category>

		<category><![CDATA[aria]]></category>

		<category><![CDATA[chernivtsi]]></category>

		<category><![CDATA[concert]]></category>

		<category><![CDATA[gig]]></category>

		<category><![CDATA[heavy metal]]></category>

		<category><![CDATA[show]]></category>

		<guid isPermaLink="false">http://blog.aurorascorpio.com/?p=22</guid>
		<description><![CDATA[Yesterday I was at cool gig - concert of Russian heavy metal legend ARIA.
Show was fantastic, we were standing near the scene and singing almost all songs along.
Some pix:



Other pictures
Video for "Bespechnyy Angel"

]]></description>
			<content:encoded><![CDATA[<p>Yesterday I was at cool gig - concert of Russian heavy metal legend ARIA.<br />
Show was fantastic, we were standing near the scene and singing almost all songs along.</p>
<p>Some pix:</p>
<p><img src="http://farm3.static.flickr.com/2071/2504134597_9db631a5f2.jpg" alt="ARIA in Chernivtsi" /></p>
<p><img src="http://farm3.static.flickr.com/2384/2504146381_2317fae387.jpg" alt="ARIA in Chernivtsi" /></p>
<p><img src="http://farm4.static.flickr.com/3152/2504970484_0f69bf2a6a.jpg" alt="ARIA in Chernivtsi" /></p>
<p><a href="http://www.flickr.com/photos/26704629@N02/sets/72157605136282451/" target="_blank">Other pictures</a></p>
<p>Video for "Bespechnyy Angel"</p>
<p><object width="512" height="323"><param name="movie" value="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.2" /><param name="allowFullScreen" value="true" /><param name="flashVars" value="id=7877021&#038;vid=2700939&#038;lang=en-us&#038;intl=us&#038;thumbUrl=http%3A//us.i1.yimg.com/us.yimg.com/p/i/bcst/videosearch/3235/64671007.jpeg&#038;embed=1" /><embed src="http://d.yimg.com/static.video.yahoo.com/yep/YV_YEP.swf?ver=2.2.2" type="application/x-shockwave-flash" width="512" height="323" allowFullScreen="true" flashVars="id=7877021&#038;vid=2700939&#038;lang=en-us&#038;intl=us&#038;thumbUrl=http%3A//us.i1.yimg.com/us.yimg.com/p/i/bcst/videosearch/3235/64671007.jpeg&#038;embed=1" ></embed></object></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.aurorascorpio.com/2008/05/19/aria-in-chernivtsi/feed/</wfw:commentRss>
		</item>
		<item>
		<title>Google interview 1</title>
		<link>http://blog.aurorascorpio.com/2008/05/17/google-interview-1/</link>
		<comments>http://blog.aurorascorpio.com/2008/05/17/google-interview-1/#comments</comments>
		<pubDate>Sat, 17 May 2008 20:09:26 +0000</pubDate>
		<dc:creator>admin</dc:creator>
		
		<category><![CDATA[Uncategorized]]></category>

		<category><![CDATA[google]]></category>

		<category><![CDATA[interview]]></category>

		<category><![CDATA[linux]]></category>

		<category><![CDATA[ubuntu]]></category>

		<guid isPermaLink="false">http://blog.aurorascorpio.com/?p=21</guid>
		<description><![CDATA[Finally it happened, after 2 unsuccesseful takes, the 3rd take of Google interview went OK.
Dylan, Engineer at Google called me yesterday evening and we had 45 minutes conversation. First he asked me to describe my usual working day.
After I was aksed about 2 different situations, we were discussing them. I told what will I do [...]]]></description>
			<content:encoded><![CDATA[<p>Finally it happened, after 2 unsuccesseful takes, the 3rd take of Google interview went OK.</p>
<p>Dylan, Engineer at Google called me yesterday evening and we had 45 minutes conversation. First he asked me to describe my usual working day.</p>
<p>After I was aksed about 2 different situations, we were discussing them. I told what will I do on server side and client side. So the situations were: double click on form button, especially if it's the form of ordering something using credit card. Another one - checking if there is already such username in base by registration, using iframe instead of JSON.</p>
<p>Dylan also asked my about JavaScript closures. But unfortunately I had no idea about that, but read some information after and it's really interesting, I will write about this soon <img src='http://blog.aurorascorpio.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>After that I had a chance to give my questions.</p>
<p>PS. my Ubuntu installation went not well, had problems with GRUB, will try again soon <img src='http://blog.aurorascorpio.com/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.aurorascorpio.com/2008/05/17/google-interview-1/feed/</wfw:commentRss>
		</item>
	</channel>
</rss>
