...

View Full Version : how to generate HTML table with javascript



eshban
09-04-2006, 06:16 AM
Hi,

I have a problem. please help me in this regard.

I have a combobox which contain numeric values from 1-7.

i want to generate a table with 2 rows and 4 columns through javascript. Means when a user select numeric value like '3' from a combo box then a page generates '3' tables without refreshing a page. And if a user selects '4' from a combobox then a script generates 4 tables with 2 rows and 4 columns and so on.

kindly guide me that how can i mkae this javascript.

plz help

vwphillips
09-04-2006, 09:26 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<head>
<title></title>

<script language="JavaScript" type="text/javascript">
<!--

function Easy(obj,id,clone){
var tar=document.getElementById(id);
var clone=document.getElementById(clone).getElementsByTagName('TABLE')[0];
for (var zxc0=0;zxc0<obj.selectedIndex;zxc0++){
tar.appendChild(clone.cloneNode(true));
}
}

function DOM(obj,id){
var tar=document.getElementById(id);
for (var zxc0=0;zxc0<obj.selectedIndex;zxc0++){
var table=document.createElement('TABLE');
table.border='1';
var tbdy=document.createElement('TBODY');
table.appendChild(tbdy);
for (var zxc1=0;zxc1<2;zxc1++){
var tr=document.createElement('TR');
tbdy.appendChild(tr);
for (var zxc2=0;zxc2<4;zxc2++){
var td=document.createElement('TD');
td.width='100';
td.appendChild(document.createTextNode(zxc2));
tr.appendChild(td);
}
}
tar.appendChild(table);
}
}




//-->
</script>
</head>

<body>
<select onchange="Easy(this,'target','C1');" >
<option >Easy Method</option>
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
<option >5</option>
</select>
<select onchange="DOM(this,'target');" >
<option >DOM Method</option>
<option >1</option>
<option >2</option>
<option >3</option>
<option >4</option>
<option >5</option>
</select>
<div id="target" ></div>

<div id="C1" style="position:absolute;visibility:hidden;" >
<table border="1">
<tr>
<td width="100" >1 </td>
<td width="100" >1 </td>
<td width="100" >1 </td>
<td width="100" >1 </td>
</tr>
<tr>
<td >2 </td>
<td >2 </td>
<td >2 </td>
<td >2 </td>
</tr>
</div>

</table>

</body>

</html>

tsubramaniam
08-10-2009, 02:30 PM
Hi,

I have one requirement such that to clone a table.
The exact requirment is i have one table with 5 rows & 7 columns. Now i want to split the table into two tables in which one table should have 3 & another table should have 2 rows. Is it possible to achieve it in Javascript ?

gumape
09-02-2009, 11:25 PM
Code:

<script>
function CloneAndSplit () {
var tableToClone = document.getElementById ("tableToClone");

var firstTable = tableToClone.cloneNode (true);
RemoveRows (firstTable, 3, 4);
var secondTable = tableToClone.cloneNode (true);
RemoveRows (secondTable, 0, 2);

document.body.appendChild (firstTable);
document.body.appendChild (secondTable);
}

function RemoveRows (table, from, to) {
for (var i=to; i >= from; i--) {
table.tBodies[0].removeChild (table.tBodies[0].rows[i]);
}
}
</script>
</head>
<body>
<button onclick="CloneAndSplit ();">Clone and split the table</button>
<br /><br />
<table id="tableToClone" border="1">
<tbody>
<tr>
<td>1.1</td><td>1.2</td><td>1.3</td><td>1.4</td><td>1.5</td><td>1.6</td><td>1.7</td>
</tr>
<tr>
<td>2.1</td><td>2.2</td><td>2.3</td><td>2.4</td><td>2.5</td><td>2.6</td><td>2.7</td>
</tr>
<tr>
<td>3.1</td><td>3.2</td><td>3.3</td><td>3.4</td><td>3.5</td><td>3.6</td><td>3.7</td>
</tr>
<tr>
<td>4.1</td><td>4.2</td><td>4.3</td><td>4.4</td><td>4.5</td><td>4.6</td><td>4.7</td>
</tr>
<tr>
<td>5.1</td><td>5.2</td><td>5.3</td><td>5.4</td><td>5.5</td><td>5.6</td><td>5.7</td>
</tr>
</tbody>
</table>
</body>

If you need detailed information, maybe the following links can help you:
cloneNode (http://help.dottoro.com/ljxqnpcv.php) method, appendChild (http://help.dottoro.com/ljvnuman.php) method, removeChild (http://help.dottoro.com/ljdihaqn.php)method.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum