Wednesday, October 14, 2009

Create Dynamic HTML table using JavaScript

JAVASCRIPT CODE

<script type="text/javascript">

function addRowToTable(name,address,tele,fax){

try {

 var w = name;

var x = address;

var y = tele;

var z= fax;

var tbl = document.getElementById('ServicesTable');

var lastRow = tbl.rows.length;

var iteration = lastRow;

var row = tbl.insertRow(lastRow);

if(lastRow % 2 ==0)

row.className="rowgrey";

else

row.className="buttons";

row.height=25;

var secondCell = row.insertCell(0);

var textNode2 = document.createTextNode(w);

secondCell.appendChild(textNode2);

 

var thirdCell = row.insertCell(1);

var textNode3 = document.createTextNode(x);

thirdCell.appendChild(textNode3);

 

var fourthCell = row.insertCell(2);

var textNode4 = document.createTextNode(y);

fourthCell.appendChild(textNode4);

 

 

var fifthCell = row.insertCell(3);

var textNode5 = document.createTextNode(z);

fifthCell.appendChild(textNode5);

} catch (e) {

}

 

}

</script>

 

HTML CODE

 

<table width="100%" border="0" cellpadding="0" cellspacing="0" class="bodyTable" height="35"  id="ServicesTable" >

<tr>

<td width="30%" height="31" align="left" class="tableTitle"><span class="style1">Company Name </span></td>

<td width="40%" height="31" align="left" class="tableTitle"><span class="style1">Address</span></td>

<td width="15%" height="31" align="left" class="tableTitle"><span class="style1">Tele. No. </span></td>

<td width="15%" height="31" align="left" class="tableTitle"><span class="style1">Fax No.</span></td>

</tr>

</table>

No comments: