dynamically loading table using javascript
hi , to one and all
i want to dynamically create tables with input boxes and drop down boxes depending on the option that is selected in a drop down box .
this is the code upto which i was able to do
go through this and help me implementing the feature i want.
code
<head>
<title>Sample code - Traversing an HTML Table with JavaScript and DOM Interfaces</title>
<script>
function start() {
var index;
var x=document.getElementById("department");
index =x.selectedIndex ;
if(index ==1)
{
// get the reference for the body
var mybody=document.getElementsByTagName("body").item( 0);
// creates an element whose tag name is TABLE
mytable = document.createElement("TABLE");
// creates an element whose tag name is TBODY
mytablebody = document.createElement("TBODY");
// creating all cells
for(j=0;j<2;j++) {
// creates an element whose tag name is TR
mycurrent_row=document.createElement("TR");
for(i=0;i<2;i++) {
// creates an element whose tag name is TD
mycurrent_cell=document.createElement("TD");
// creates a Text Node
currenttext=document.createTextNode("cell is row "+j+", column "+i);
// appends the Text Node we created into the cell TD
mycurrent_cell.appendChild(currenttext);
// appends the cell TD into the row TR
mycurrent_row.appendChild(mycurrent_cell);
}
// appends the row TR into TBODY
mytablebody.appendChild(mycurrent_row);
}
// appends TBODY into TABLE
mytable.appendChild(mytablebody);
// appends TABLE into BODY
mybody.appendChild(mytable);
// sets the border attribute of mytable to 2;
mytable.setAttribute("border","2");
mytable.setAttribute("align","left");
}
else
if (index ==2)
{
// get the reference for the body
var mybody=document.getElementsByTagName("body").item( 0);
// creates an element whose tag name is TABLE
mytable = document.createElement("TABLE");
// creates an element whose tag name is TBODY
mytablebody = document.createElement("TBODY");
// creating all cells
for(j=0;j<2;j++) {
// creates an element whose tag name is TR
mycurrent_row=document.createElement("TR");
for(i=0;i<3;i++) {
// creates an element whose tag name is TD
mycurrent_cell=document.createElement("TD");
// creates a Text Node
currenttext=document.createTextNode("cell is row "+j+", column "+i);
// appends the Text Node we created into the cell TD
mycurrent_cell.appendChild(currenttext);
// appends the cell TD into the row TR
mycurrent_row.appendChild(mycurrent_cell);
}
// appends the row TR into TBODY
mytablebody.appendChild(mycurrent_row);
}
// appends TBODY into TABLE
mytable.appendChild(mytablebody);
// appends TABLE into BODY
mybody.appendChild(mytable);
// sets the border attribute of mytable to 2;
mytable.setAttribute("border","2");
mytable.setAttribute("align","left");
}
//mytable.setAttribute("disabled","false");
}
</script>
</head>
<body >
<select size="1" id="department" onchange="start()">
<option value selected="0"></option>
<option value="1">biotech</option>
<option value="2">PHARMA <OPTION>
<input type="text" name="kalyan" value="kalyan">
</body>
</html>
kalyan
|
