Insert new row table

@CharlesMay 13.2005 — #The best method:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;meta name="Content-Script-Type" content="text/javascript"&gt;
 &lt;meta name="Content-Style-Type" content="text/css"&gt;
 &lt;title&gt;Example&lt;/title&gt;
 
 &lt;script type="text/javascript"&gt;
 &lt;!--
 if (document.getElementById) onload = function () {
 document.getElementById ('foo').className = 'hide';
 setTimeout ("document.getElementById ('foo').className = ''", 1000);
 }
 // --&gt;
 &lt;/script&gt;
 
 &lt;style type="text/css"&gt;
 &lt;!-- 
 th, td {background-color:#aaa; color#000; padding:1ex; text-align:center}
 .hide {display:none} 
 --&gt;
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;table summary="some poor example"&gt;
 &lt;thead&gt;
 &lt;tr&gt;&lt;th scope="col"&gt;Heading&lt;/th&gt;&lt;th scope="col"&gt;Heading&lt;/th&gt;&lt;th scope="col"&gt;Heading&lt;/th&gt;
 &lt;/thead&gt;
 &lt;tbody&gt;
 &lt;tr&gt;&lt;td&gt;Data&lt;/td&gt;&lt;td&gt;Data&lt;/td&gt;&lt;td&gt;Data&lt;/td&gt;&lt;/tr&gt;
 &lt;tr id="foo"&gt;&lt;td&gt;Data&lt;/td&gt;&lt;td&gt;Data&lt;/td&gt;&lt;td&gt;Data&lt;/td&gt;&lt;/tr&gt;
 &lt;tr&gt;&lt;td&gt;Data&lt;/td&gt;&lt;td&gt;Data&lt;/td&gt;&lt;td&gt;Data&lt;/td&gt;&lt;/tr&gt;
 &lt;/tbody&gt;
 &lt;/table&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@CharlesMay 13.2005 — #Makes your page JavaScript dependant, which is very bad:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
 &lt;meta name="Content-Script-Type" content="text/javascript"&gt;
 &lt;meta name="Content-Style-Type" content="text/css"&gt;
 &lt;title&gt;Example&lt;/title&gt;
 
 &lt;script type="text/javascript"&gt;
 &lt;!--
 if (document.getElementById) onload = function () {
 var tr = document.createElement ('TR');
 
 <i>	</i>var td1 = document.createElement ('TD');
 <i>	</i>var text1 = document.createTextNode ('New Data');
 <i>	</i>td1.appendChild (text1);
 <i>	</i>tr.appendChild (td1);
 
 <i>	</i>var td2 = document.createElement ('TD');
 <i>	</i>var text2 = document.createTextNode ('New Data');
 <i>	</i>td2.appendChild (text2);
 <i>	</i>tr.appendChild (td2);
 
 <i>	</i>var td3 = document.createElement ('TD');
 <i>	</i>var text3 = document.createTextNode ('New Data');
 <i>	</i>td3.appendChild (text3);
 <i>	</i>tr.appendChild (td3);
 
 <i>	</i>document.getElementById ('foo').appendChild (tr);
 
 }
 // --&gt;
 &lt;/script&gt;
 
 &lt;style type="text/css"&gt;
 &lt;!-- 
 th, td {background-color:#aaa; color#000; padding:1ex; text-align:center}
 .hide {display:none} 
 --&gt;
 &lt;/style&gt;
 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;table summary="some poor example"&gt;
 &lt;thead&gt;
 &lt;tr&gt;&lt;th scope="col"&gt;Heading&lt;/th&gt;&lt;th scope="col"&gt;Heading&lt;/th&gt;&lt;th scope="col"&gt;Heading&lt;/th&gt;
 &lt;/thead&gt;
 &lt;tbody id="foo"&gt;
 &lt;tr&gt;&lt;td&gt;Data&lt;/td&gt;&lt;td&gt;Data&lt;/td&gt;&lt;td&gt;Data&lt;/td&gt;&lt;/tr&gt;
 &lt;tr&gt;&lt;td&gt;Data&lt;/td&gt;&lt;td&gt;Data&lt;/td&gt;&lt;td&gt;Data&lt;/td&gt;&lt;/tr&gt;
 &lt;/tbody&gt;
 &lt;/table&gt;
 &lt;/body&gt;
 &lt;/html&gt;

Insert new row table

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Insert new row table

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴