oops i made mistake while posting my js code

#1 February 10th, 2006, 12:45 PM

hi.i made mistake while copying my code sorry friends.This is the one i
tried .i got o/p for dynamic rows how should i h'v to incorporate
"onChange"event in "setAttribute". following code is not work for
double combo boxes in dynamic rows((i.e.,)here from second row).since
first row i kept as static it(dbl combobox) works.
plz help me, i need it very badly.

<html>
<form name="frmdesilt">
<head>
<title>Insert Table Row using DOM</title>
</head>
<body>
<input type="button" value="AddGroup" size="-4" onClick="addRow();">
<input type="button" value="Add Item" size="0" onClick="addRow();">

<table id="table1">
<tbody>
<tr>
<th>Group-name</th>
<th>Item-Name</th>
<th>Number</th>
<th>Amount</th>
</tr>
<tr>
<td><select name="cmbgroup"
onChange="redirect(this.options.selectedIndex);">
<option>india--</option>
<option>usa</option>
</select> </td>
<td><select name="cmbitem">
<option>alaska--</option>
<option>chennai--</option>
</select>
</td>
<td>
<input type="text" size="3">
</td>
<td>
<input type="text" size="7">
</td>
</tr>
</tbody>
</table>
</form>
</body>
<script language="javascript">
function addRow()
{
var tbody =
document.getElementById("table1").getElementsByTag Name("tbody")[0];
var row = 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","3");

inp3.setAttribute("type","text");
inp3.setAttribute("value","amount");
inp3.setAttribute("size","7");

combo1.setAttribute("name","cmbgroup");
//combo1.setAttribute("onChange","redirect(this.opti ons.selectedIndex);");
combo1.onChange=function(){"redirect(this.options. selectedIndex);"};

combo11.setAttribute("value","usa1");
combo11.innerHTML="india--";

combo12.setAttribute("value","india1");

combo12.innerHTML ="usa--";

combo2.setAttribute("name","cmbitem");
combo21.setAttribute("value","alaska");
combo21.innerHTML="alaska--";

combo22.setAttribute("value","chennai");
combo22.innerHTML="chennai";

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);

row.appendChild(cell2);
row.appendChild(cell3);
row.appendChild(cell4);
row.appendChild(cell5);

tbody.appendChild(row);
}

var hgroups=document.frmdesilt.cmbgroup.options.length
//document.write("hello");
var group1=new Array(hgroups)
for (i=0; i<hgroups; i++)
group1[i]=new Array()

group1[0][0]=new Option("njhgjnh","http://javascriptkit.com")
group1[0][1]=new Option("News.com","http://www.news.com")
group1[0][2]=new Option("Wired News","http://www.google.com")

group1[1][0]=new Option("CNN","http://www.cnn.com")
group1[1][1]=new Option("ABC News","http://www.abcnews.com")

var temp=document.frmdesilt.cmbitem

function redirect(x)
{
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group1[x].length;i++){
temp.options[i]=new Option(group1[x][i].text,group1[x][i].value)
}
temp.options[0].selected=true
}

</script>

</body>
</form>
</html>

#2 February 10th, 2006, 09:25 PM

priya wrote:[color=blue]
> hi.i made mistake while copying my code sorry friends.This is the one i
> tried .i got o/p for dynamic rows how should i h'v to incorporate
> "onChange"event in "setAttribute". following code is not work for
> double combo boxes in dynamic rows((i.e.,)here from second row).since
> first row i kept as static it(dbl combobox) works.
> plz help me, i need it very badly.
>[/color]

[snipped unbelievably invalid html and poor javascript code]

OK. There were too many problems to enumerate. Analyze this working
example and let us know if you have any specific questions.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Insert Table Row using DOM</title>
<script type="text/javascript">
function $(id){return document.getElementById(id)}
function ce(el){return document.createElement(el)}

var items = [
{txt:'Properties', val:'win_prop', subitems:[
{txt:'content', val:'win_content'},
{txt:'closed', val:'win_closed'},
{txt:'Components', val:'win_Components'}
]},
{txt:'Methods', val:'win_meth', subitems:[
{txt:'alert', val:'win_alert'},
{txt:'atob', val:'win_atob'},
{txt:'back', val:'win_back'},
{txt:'blur', val:'win_blur'}
]},
{txt:'Event Handlers', val:'win_evnt', subitems:[
{txt:'onabort', val:'win_onabort'},
{txt:'onblur', val:'win_onblur'},
{txt:'onchange', val:'win_onchange'}
]}
];

function updatesel(){
var subs = items[this.selectedIndex].subitems;
var sel = this.parentNode.nextSibling.firstChild;
sel.options.length = 0;
for (var j=0; j<subs.length; j++){
sel.options[j] = new Option(subs[j].txt, subs[j].val);
}
}

function addRow(){
var tbody = $('table1').getElementsByTagName('tbody')[0];
var row = tbody.appendChild(ce('tr'));

var cell2 = row.appendChild(ce('td'));
var combo1 = cell2.appendChild(ce('select'));
combo1.setAttribute('name', 'cmbgroup');
combo1.onchange = updatesel;
for (var i=0; i<items.length; i++){
combo1.options[i] = new Option(items[i].txt, items[i].val);
}

var cell3 = row.appendChild(ce('td'));
var combo2 = cell3.appendChild(ce('select'));
combo2.setAttribute('name', 'cmbitem');
for (var i=0; i<items[0].subitems.length; i++){
combo2.options[i] = new Option(
items[0].subitems[i].txt, items[0].subitems[i].val
);
}

var cell4 = row.appendChild(ce('td'));
var inp2 = cell4.appendChild(ce('input'));
inp2.setAttribute('name', 'itemnum');
inp2.setAttribute('type', 'text');
inp2.setAttribute('value', 'no');
inp2.setAttribute('size', '3');

var cell5 = row.appendChild(ce('td'));
var inp3 = cell5.appendChild(ce('input'));
inp3.setAttribute('name', 'itemamt');
inp3.setAttribute('type', 'text');
inp3.setAttribute('value', 'amount');
inp3.setAttribute('size', '7');
}
window.onload = addRow;
</script>
</head>
<body>
<form name="frmdesilt">
<input type="button" value="AddGroup" onclick="addRow()">
<input type="button" value="Add Item" onclick="addRow()">
<table id="table1">
<thead>
<tr>
<th>Group-name</th>
<th>Item-Name</th>
<th>Number</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</form>
</body>
</html>

oops i made mistake while posting my js code

Popular Articles

What is Bytes?