Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>I have created a script through which you can add inner tables into a column of the table.</p> <p>I have used the concepts of @DragonPrince and @Bui Cuong for devoloping my answer.</p> <pre><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;script language="javascript"&gt; function addtabletesting(tableID) { var table1 = document.getElementById(tableID); var rowCount1 = table1.rows.length; var row1 = table1.insertRow(rowCount1-1); var td1 = document.createElement("TD"); /* creating a new row row1 andadded a column td1 */ var table2= document.createElement("TABLE"); var rowCount2 = table2.rows.length; var row2 = table2.insertRow(rowCount2); var td2 = document.createElement("TD"); /* Created a new table table2 added row2 and td2. */ td2.innerHTML = "&lt;h4&gt;my new column in new inner table &lt;/h4&gt;"; row1.appendChild(td1); td1.appendChild(table2); row2.appendChild(td2); /* Added td1 into row1, table2 into td1, and td2 into row2. */ } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;table id="testtable1" border="1"&gt; &lt;tr&gt;&lt;td width="150"&gt;old table row 1 column 1&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;old table row 2 column 1&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt; &lt;a onclick="addtabletesting('testtable1')" &gt;Add table&lt;/a&gt; &lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Check it. Currently its just simply adding a inner table only. You can modify it so that you will be able to make it as you want.</p> <p>Check the following detailed answer.</p> <p>Body part</p> <pre><code>&lt;body&gt; &lt;br/&gt; &lt;a onclick="show_prompt()" &gt;Add Multiple Companies&lt;/a&gt; &lt;br/&gt; &lt;table border="0" align="left" class="totalbodycontainer"&gt; &lt;%-- table in which entire body content is written --%&gt; &lt;tr&gt; &lt;td class="totalbodycontainer"&gt; &lt;div class="boxdiv" align="center" &gt; &lt;div class="formmainheader" &gt; &lt;h2 &gt;Add Company&lt;/h2&gt; &lt;/div&gt; &lt;form action="registration" &gt; &lt;table id="sarinaddrow" border="0" align="center"&gt;&lt;tr&gt;&lt;td&gt; &lt;table width="200" border="1" class="tableborder" align="center"&gt; &lt;tr class="rowdiv"&gt; &lt;td width="799" class="formheader" &gt;&lt;h4&gt; Comany Details&lt;/h4&gt;&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt; &lt;td width="799"&gt; &lt;table id="table1" width="792" border="0"&gt; &lt;tr class="rowdiv"&gt; &lt;td width="170" class="formlabel"&gt;&lt;h4&gt; Company ID&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h4&gt;&lt;/td&gt; &lt;td width="205" class="formfield"&gt;&amp;nbsp;&lt;/td&gt; &lt;td width="20" class="formgap"&gt;&lt;/td&gt; &lt;td width="170" class="formlabel"&gt;&lt;h4&gt; Company Name &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h4&gt;&lt;/td&gt; &lt;td width="205" class="formfield"&gt;&lt;input type="text" name="type" id="type" size="30" /&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr class="rowdiv"&gt; &lt;td width="170" class="formlabel"&gt;&lt;h4&gt;Address &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h4&gt;&lt;/td&gt; &lt;td width="205" class="formfield"&gt;&lt;textarea name="textarea" id="textarea" cols="28" rows="2"&gt;&lt;/textarea&gt;&lt;/td&gt; &lt;td width="20" class="formgap"&gt;&lt;/td&gt; &lt;td width="170" class="formlabel"&gt;&lt;h4&gt;Phone Number &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h4&gt;&lt;/td&gt; &lt;td width="205" class="formfield"&gt;&lt;h6&gt; &lt;input type="text" name="type2" id="type2" size="30"/&gt; &lt;/h6&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="rowdiv"&gt; &lt;td width="170" class="formlabel"&gt;&lt;h4&gt;Fax Number &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h4&gt;&lt;/td&gt; &lt;td class="formfield"&gt;&lt;input type="text" name="type3" id="type3" size="30"/&gt;&lt;/td&gt; &lt;td class="formgap"&gt;&lt;/td&gt; &lt;td width="170" class="formlabel"&gt;&lt;h4&gt;E Mail &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h4&gt;&lt;/td&gt; &lt;td class="formfield"&gt;&lt;input type="text" name="type5" id="type5" size="30"/&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="rowdiv"&gt; &lt;td class="formlabel"&gt;&lt;h4&gt;Web Site &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h4&gt;&lt;/td&gt; &lt;td class="formfield"&gt;&lt;input type="text" name="type7" id="type7" size="30"/&gt;&lt;/td&gt; &lt;td class="formgap"&gt;&lt;/td&gt; &lt;td class="formlabel"&gt;&amp;nbsp;&lt;/td&gt; &lt;td class="formfield"&gt;&amp;nbsp;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="rowdiv"&gt; &lt;td class="formlabel"&gt;&lt;h4&gt;Product Type &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h4&gt;&lt;/td&gt; &lt;td class="formfield"&gt;&lt;input type="text" name="type7" id="type8" size="30"/&gt;&lt;/td&gt; &lt;td class="formgap"&gt;&lt;/td&gt; &lt;td class="formlabel"&gt;&lt;h4&gt;Description &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h4&gt;&lt;/td&gt; &lt;td class="formfield"&gt;&lt;textarea name="textarea2" id="textarea2" cols="28" rows="2"&gt;&lt;/textarea&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="rowdiv"&gt; &lt;td width="170" class="formlabel"&gt;&amp;nbsp;&lt;/td&gt; &lt;td class="formfield"&gt;&amp;nbsp;&lt;/td&gt; &lt;td class="formgap"&gt;&lt;/td&gt; &lt;td class="formlabel"&gt;&amp;nbsp;&lt;/td&gt; &lt;td class="formfield"&gt;&lt;h6&gt;&lt;a onclick="addproduct('table1')"&gt;Add product&lt;/a&gt;&lt;/h6&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/td&gt;&lt;/tr&gt; &lt;tr&gt; &lt;td class="formlabel"&gt;&lt;h6 &gt;&lt;a onclick="addcompany('sarinaddrow',1)"&gt;Add Company&lt;/a&gt;&lt;/h6&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &amp;nbsp; &lt;/form&gt; &lt;p&gt;&lt;/p&gt; &lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; &lt;/body&gt; </code></pre> <p>Scripts</p> <pre><code>&lt;script language="javascript"&gt; var sarintableno=1; function addpolicy(tableID) { try{ var mystring=null; var table = document.getElementById(tableID); var rowCount = table.rows.length; var row1 = table.insertRow(rowCount-1); var td1 = document.createElement("TD"); //td1 td1.className="formlabel"; td1.innerHTML='&lt;h4&gt;Product Type &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h4&gt;'; row1.appendChild(td1); var td2 = document.createElement("TD"); //td2 td2.className="formfield"; mystring='&lt;input type="text" name="type7" id="type8" size="30"/&gt;'; td2.innerHTML=mystring; row1.appendChild(td2); var td3 = document.createElement("TD"); //td3 td3.className="formgap"; row1.appendChild(td3); var td4 = document.createElement("TD"); //td4 td4.className="formlabel"; td4.innerHTML='&lt;h4&gt;Description &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h4&gt;'; row1.appendChild(td4); var td5 = document.createElement("TD"); //td5 td5.className="formfield"; mystring='&lt;textarea name="textarea2" id="textarea2" cols="28" rows="2"&gt;&lt;/textarea&gt;'; td5.innerHTML=mystring; row1.appendChild(td5); }catch(e) { alert(e); } } function addcompany(tableID,companyno) { try{ var xxx=0; var mytext1=null; for( xxx=0;xxx&lt;companyno;xxx++ ){ sarintableno++; var table1 = document.getElementById(tableID); // t1 var rowCount1 = table1.rows.length; var row1 = table1.insertRow(rowCount1-1); //add tr1 var td1 = document.createElement("TD"); //add td1 row1.appendChild(td1); var table2= document.createElement("TABLE");//t2 td1.appendChild(table2); var rowCount2 = table2.rows.length; var row2 = table2.insertRow(rowCount2); //tr2 var td2 = document.createElement("TD"); //td2 row2.appendChild(td2); rowCount2 = table2.rows.length; var row3 = table2.insertRow(rowCount2); //tr3 var td3 = document.createElement("TD"); //td3 row3.appendChild(td3); var table3= document.createElement("TABLE");//t3 td3.appendChild(table3); var rowCount3 = table3.rows.length; var row4 = table3.insertRow(rowCount3); //tr4 var td4 = document.createElement("TD"); //td4 row4.appendChild(td4); var td5 = document.createElement("TD"); //td5 row4.appendChild(td5); var td6 = document.createElement("TD"); //td6 row4.appendChild(td6); var td7 = document.createElement("TD"); //td7 row4.appendChild(td7); var td8 = document.createElement("TD"); //td8 row4.appendChild(td8); var rowCount3 = table3.rows.length; var row5 = table3.insertRow(rowCount3); //tr5 var td9 = document.createElement("TD"); //td9 row5.appendChild(td9); var td10 = document.createElement("TD"); //td10 row5.appendChild(td10); var td11 = document.createElement("TD"); //td11 row5.appendChild(td11); var td12 = document.createElement("TD"); //td12 row5.appendChild(td12); var td13 = document.createElement("TD"); //td13 row5.appendChild(td13); var rowCount3 = table3.rows.length; var row6 = table3.insertRow(rowCount3); //tr6 var td14 = document.createElement("TD"); //td14 row6.appendChild(td14); var td15 = document.createElement("TD"); //td15 row6.appendChild(td15); var td16 = document.createElement("TD"); //td16 row6.appendChild(td16); var td17 = document.createElement("TD"); //td17 row6.appendChild(td17); var td18 = document.createElement("TD"); //td18 row6.appendChild(td18); var rowCount3 = table3.rows.length; var row7 = table3.insertRow(rowCount3); //tr7 var td19 = document.createElement("TD"); //td19 row7.appendChild(td19); var td20 = document.createElement("TD"); //td20 row7.appendChild(td20); var td21 = document.createElement("TD"); //td21 row7.appendChild(td21); var td22 = document.createElement("TD"); //td22 row7.appendChild(td22); var td23 = document.createElement("TD"); //td23 row7.appendChild(td23); var rowCount3 = table3.rows.length; var row8 = table3.insertRow(rowCount3); //tr7 var td24 = document.createElement("TD"); //td24 row8.appendChild(td24); var td25 = document.createElement("TD"); //td25 row8.appendChild(td25); var td26 = document.createElement("TD"); //td26 row8.appendChild(td26); var td27 = document.createElement("TD"); //td27 row8.appendChild(td27); var td28 = document.createElement("TD"); //td28 row8.appendChild(td28); var rowCount3 = table3.rows.length; var row9 = table3.insertRow(rowCount3); //tr7 var td29 = document.createElement("TD"); //td24 row9.appendChild(td29); var td30 = document.createElement("TD"); //td25 row9.appendChild(td30); var td31 = document.createElement("TD"); //td26 row8.appendChild(td31); var td32 = document.createElement("TD"); //td27 row9.appendChild(td32); var td33 = document.createElement("TD"); //td28 row9.appendChild(td33); /* styles and inner htmls */ table2.className="tableborder"; table2.setAttribute("width","200"); table2.setAttribute("border","1"); table2.setAttribute("allign","center"); row2.className="rowdiv"; td2.className="formheader"; td2.setAttribute("width","799"); td2.innerHTML="&lt;h4&gt;Comany Details&lt;/h4&gt;"; td3.setAttribute("width","799"); table3.setAttribute("width","792"); table3.setAttribute("border","0"); table3.setAttribute("id","table"+sarintableno); row4.className="rowdiv"; td4.className="formlabel"; td4.setAttribute("width","170"); td4.innerHTML="&lt;h4&gt;Company ID&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h4&gt;"; td5.className="formfield"; td5.setAttribute("width","205"); td5.innerHTML="&amp;nbsp;"; td6.className="formgap"; td6.setAttribute("width","20"); td7.className="formlabel"; td7.setAttribute("width","170"); td7.innerHTML="&lt;h4&gt;Company Name &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h4&gt;"; td8.className="formfield"; td8.setAttribute("width","205"); td8.innerHTML='&lt;input type="text" name="type" id="type" size="30" /&gt;'; row5.className="rowdiv"; td9.className="formlabel"; td9.setAttribute("width","170"); td9.innerHTML="&lt;h4&gt;Address &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h4&gt;"; td10.className="formfield"; td10.setAttribute("width","205"); td10.innerHTML='&lt;textarea name="textarea" id="textarea" cols="28" rows="2"&gt;&lt;/textarea&gt;'; td11.className="formgap"; td11.setAttribute("width","20"); td12.className="formlabel"; td12.setAttribute("width","170"); td12.innerHTML="&lt;h4&gt;Phone Number &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h4&gt;"; td13.className="formfield"; td13.setAttribute("width","205"); td13.innerHTML='&lt;h6&gt;&lt;input type="text" name="type2" id="type2" size="30"/&gt;&lt;/h6&gt;'; row6.className="rowdiv"; td14.className="formlabel"; td14.setAttribute("width","170"); td14.innerHTML="&lt;h4&gt;Fax Number &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h4&gt;"; td15.className="formfield"; td15.setAttribute("width","205"); td15.innerHTML='&lt;input type="text" name="type3" id="type3" size="30"/&gt;'; td16.className="formgap"; td16.setAttribute("width","20"); td17.className="formlabel"; td17.setAttribute("width","170"); td17.innerHTML="&lt;h4&gt;E Mail &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h4&gt;"; td18.className="formfield"; td18.setAttribute("width","205"); td18.innerHTML='&lt;input type="text" name="type5" id="type5" size="30"/&gt;'; row7.className="rowdiv"; td19.className="formlabel"; td19.setAttribute("width","170"); td19.innerHTML="&lt;h4&gt;Web Site &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h4&gt;"; td20.className="formfield"; td20.setAttribute("width","205"); td20.innerHTML='&lt;input type="text" name="type7" id="type7" size="30"/&gt;'; td21.className="formgap"; td21.setAttribute("width","20"); td22.className="formlabel"; td22.setAttribute("width","170"); td22.innerHTML="&lt;h4&gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h4&gt;"; td23.className="formfield"; td23.setAttribute("width","205"); td23.innerHTML='&amp;nbsp;'; row8.className="rowdiv"; td24.className="formlabel"; td24.setAttribute("width","170"); td24.innerHTML="&lt;h4&gt;Product Type &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h4&gt;"; td25.className="formfield"; td25.setAttribute("width","205"); td25.innerHTML='&lt;input type="text" name="type7" id="type8" size="30"/&gt;'; td26.className="formgap"; td26.setAttribute("width","20"); td27.className="formlabel"; td27.setAttribute("width","170"); td27.innerHTML="&lt;h4&gt;Description &amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;/h4&gt;"; td28.className="formfield"; td28.setAttribute("width","205"); td28.innerHTML='&lt;textarea name="textarea2" id="textarea2" cols="28" rows="2"&gt;&lt;/textarea&gt;'; row9.className="rowdiv"; td29.className="formlabel"; td29.setAttribute("width","170"); td29.innerHTML="&amp;nbsp;"; td30.className="formfield"; td30.setAttribute("width","205"); td30.innerHTML='&amp;nbsp;'; td31.className="formgap"; td31.setAttribute("width","20"); td31.innerHTML="&amp;nbsp;"; td32.className="formlabel"; td32.setAttribute("width","170"); td32.innerHTML="&amp;nbsp;"; td33.className="formfield"; td33.setAttribute("width","205"); mytext1='&lt;h6&gt;&lt;a onclick="addproduct('+"'table"+sarintableno+"'"+');"&gt;Add product&lt;/a&gt;&lt;/h6&gt;'; td33.innerHTML=mytext1; } }catch(e) { alert(e); } } function show_prompt() { var name=prompt("Please enter the number of companies ","2"); if (name!=null &amp;&amp; name!="") { addcompany('sarinaddrow',name); } } &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload