PDA

View Full Version : Count the number of dropmenues


smitho
02-01-2010, 02:05 AM
Is there a way to count the number of dropmenus in a cell?

I have a simple JS that will add dropmenus to a cell but I need to make the name for each one I add unique. If I can count the number I could add a number to the name each time the function is run.


<script language="javascript">
function nodetest(val,val2){
//alert(document.getElementById('cellone').firstChil d);
var myclone = document.getElementById(val2).cloneNode(true);
document.getElementById(val).appendChild(myclone);
}
</script>

<table border="1" id="mytab">
<thead>
<tr>
<th>&nbsp;</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td id="cellone">
<input type="button" value="+" onclick="nodetest('cellone', 'select1')" />
<select name="select1" id="select1">
<option>One A</option>
<option>One B</option>
<option>One C</option>
</select></td>
<td id="celltwo">
<input type="button" value="+" onclick="nodetest('celltwo','select2')" />
<select name="select2" id="select2">
<option>Two A</option>
<option>Two B</option>
<option>Two C</option>
</select></td>
</tr>
</tbody>
</table>

smitho
02-01-2010, 04:20 AM
Change the select menus to :


<select name="select1.0" id="select1.0">
then use this JS:


function nodetest(val,val2){
//alert(document.getElementById(val).childNodes.leng th);
var myclone = document.getElementById(val2).cloneNode(true);
var newName = myclone.name.substring(0,myclone.name.length-2)+"."+(document.getElementById(val).childNodes.length-3);
myclone.setAttribute('name',newName);
myclone.setAttribute('id',newName);
document.getElementById(val).appendChild(myclone);
}
This will create:


<td id="cellone">
<input value="A" onclick="nodetest('cellone', 'select1.0')" type="button">
<select name="select1.0" id="select1.0">
<option>One A</option>
<option>One B</option>
<option>One C</option>
</select><select name="select1.1" id="select1.1">
<option>One A</option>
<option>One B</option>
<option>One C</option>
</select><select name="select1.2" id="select1.2">
<option>One A</option>
<option>One B</option>
<option>One C</option>
</select><select name="select1.3" id="select1.3">
<option>One A</option>
<option>One B</option>
<option>One C</option>
</select></td>