Navigation with Combo box and Java
Script
In this article you learn the basics of JavaScript and
create your first JavaScript program.
What is JavaScript in Navigation with Combo box?
JavaScript is a 2-level combo box menu script. Organize and compact
categories into link, all displayed using just one selection box. The navigation that requires absolutely no DHTML or Javascript experience. It
is creates any cross-browser, popup or drop-down menu that works alike in all browsers supporting DHTML and in all platforms.
The navigation DHTML/JavaScript menus are designed with a treelike approach. Users can tailor their menu by using the Properties Pane or by choosing a predefined appearance from the Style Gallery. The menu can be either vertical or
horizontal, that can be movable, stay visible while scrolling, contain static or animated images, borders, colors, and much more. Once everything is set, you can use the insert-menu-into-Web-page command to add
menu in the Web page in a fast and easy manner without any code.
Example:
<html>
<head>
<body>
<form name="frmdesilt">
<head>
<title>Insert Table col using DOM</title>
<script language="javascript">
function addcol()
{
var tbody = document.getElementById("table1").getElementsByTagName("tbody")[0];
var col = document.createElement("TR");
var cell1 = document.createElement("TD");
var inp1 = document.createElement("INPUT");
var combo1=document.createElement("select");
var combo11=document.createElement("option");
var combo12=document.createElement("option");
var combo2=document.createElement("select");
var combo21=document.createElement("option");
var combo22=document.createElement("option");
var inp2=document.createElement("INPUT");
var inp3=document.createElement("INPUT");
inp2.setAttribute("type","text");
inp2.setAttribute("value","no");
inp2.setAttribute("size","4");
inp3.setAttribute("type","text");
inp3.setAttribute("value","amount");
inp3.setAttribute("size","10");
combo1.setAttribute("name","cmbgroup");
combo1.setAttribute("onChange","redirect(this.option.selectedIndex)");
combo11.setAttribute("value","Japan1");
combo11.innerHTML="india--";
combo12.setAttribute("value","kanpur1");
combo12.innerHTML ="kanpur--";
combo2.setAttribute("name","cmbitem");
combo21.setAttribute("value","patna");
combo21.innerHTML="patna--";
combo22.setAttribute("value","Bangolor");
combo22.innerHTML="Bangolor--";
combo1.appendChild(combo11);
combo1.appendChild(combo12);
combo2.appendChild(combo21);
combo2.appendChild(combo22);
var cell2 = document.createElement("TD");
cell2.appendChild(combo1);
var cell3 = document.createElement("TD");
cell3.appendChild(combo2);
var cell4 = document.createElement("TD");
cell4.appendChild(inp2);
var cell5 = document.createElement("TD");
cell5.appendChild(inp3);
col.appendChild(cell2);
col.appendChild(cell3);
col.appendChild(cell4);
col.appendChild(cell5);
tbody.appendChild(col);
}
</script>
</head>
<body>
<input type="button" value="Add col" size="-6" onClick="addcol();">
<table id="table1">
<tbody>
<tr>
<th>country-name</th>
<th>Item-Name</th>
<th>Number</th>
<th>Total Amount</th>
</tr>
<tr>
<td><select name="group">
<option>india--</option>
</select>
</td>
<td><select name="item">
<option>calcuta--</option>
</select>
</td>
<td>
<input type="text" size="4">
</td>
<td>
<input type="text" size="10">
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Current Comments
0 comments so far (post your own) View All Comments Latest 10 Comments: