manishblr1
Programmer
I have a screen where users select the number of periods from a dropdown list.
Based on the number selected in the dropdown, a dynamic table is created with rows equal to the number selected from the dropdown.
On selecting a number from the dropdown a function is called which creates a dynamic table (columns fixed to 2)
In this table I am populating the first column and disabling the second one. Based on change in the first dropdown, the second dropdown should be enabled and populated.
But I am facing the following issues:
1. Every time only one row is shown no matter what number you select from the number of periods dropdown
2. On change in first dropdown in dynamic table, a function is called.
In this function I am trying to access the second dropdown id and enable it, but it’s not happening.
Here is the code
Thanks in advance.
Based on the number selected in the dropdown, a dynamic table is created with rows equal to the number selected from the dropdown.
On selecting a number from the dropdown a function is called which creates a dynamic table (columns fixed to 2)
In this table I am populating the first column and disabling the second one. Based on change in the first dropdown, the second dropdown should be enabled and populated.
But I am facing the following issues:
1. Every time only one row is shown no matter what number you select from the number of periods dropdown
2. On change in first dropdown in dynamic table, a function is called.
In this function I am trying to access the second dropdown id and enable it, but it’s not happening.
Here is the code
Code:
<HTML>
<Title> TimePeriod </Title>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Expires" content="0"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Pragma" content="no-cache"/>
</HEAD>
<script language="Javascript">
var measureClassArray = new Array();
measureClassArray[0] = "Select Measure Class";
measureClassArray[1] = "MC1";
measureClassArray[2] = "MC2";
measureClassArray[3] = "MC3";
measureClassArray[4] = "MC4";
measureClassArray[5] = "MC5";
var measureArray = new Array();
measureArray[0] = "Select Measure";
measureArray[1] = "m1";
measureArray[2] = "m2";
measureArray[3] = "m3";
measureArray[4] = "m4";
measureArray[5] = "m5";
function populateMeasure(_measureClassID){
var rowId= _measureClassID.substring(12);
alert(document.getElementById(_measureClassID).value);
alert(document.getElementById('measure'+rowId));
if(document.getElementById(_measureClassID).value != "Select Measure Class")
{
document.getElementById('measure'+rowId).disabled=false;
}
else
{
document.getElementById('measure'+rowId).disabled=true;
}
measureID= document.getElementById('measure'+rowId);
if(!measureID.length)
{
for (i=0;i<measureArray.length-1 ;i++)
{
var opt = document.createElement("option");
measureID.options.add(opt);
opt.text = measureArray[i];
opt.value = i;
}
}
}
function createTable(){
var testArray= new Array();
testArray[0]=0;
var tbl = document.getElementById('shiftTable');
deleteTableLength= tbl.rows.length;
while(deleteTableLength>0){
document.getElementById('shiftTable').deleteRow(deleteTableLength-1);
deleteTableLength --;
}
rowCount=document.getElementById('genericFunction').value;
var mytablebody = document.createElement("tbody");
columnHeading = document.createElement("tr");
metricHeading = document.createElement("TD");
metricHeading.innerHTML="Metric";
metricHeading.setAttribute("bgColor","#BAD2E8");
metricHeading.setAttribute("align","center");
columnHeading.appendChild(metricHeading);
measureClassHeading = document.createElement("TD");
measureClassHeading.innerHTML="Measure Class";
measureClassHeading.setAttribute("bgColor","#BAD2E8");
measureClassHeading.setAttribute("align","center");
columnHeading.appendChild(measureClassHeading);
mytablebody.appendChild(columnHeading);
for(i = 0; i < rowCount; i++){
// creates a <tr> element
eachRow = document.createElement("tr");
cell0 = document.createElement("TD");
e0 = document.createElement("select");
e0.id='measureClass'+i;
for (i=0;i<measureClassArray.length;i++){
var opt = document.createElement("option");
e0.options.add(opt);
opt.text = measureClassArray[i];
opt.value = measureClassArray[i];
}
e0.onchange= function(){populateMeasure(e0.id);};
// e4.setAttribute('maxLength', 12);
cell0.appendChild(e0);
eachRow.appendChild(cell0);
cell1 = document.createElement("TD");
e1 = document.createElement("select");
e1.id='measure'+i;
e1.disabled=true;
cell1.appendChild(e1);
eachRow.appendChild(cell1);
mytablebody.appendChild(eachRow);
}
// appends <tbody> into <table>
tbl.appendChild(mytablebody);
// mybody.appendChild(mytable);
tbl.setAttribute("border", "2");
}
</script>
<!-- To avoid scrollbar at the right side: style="overflow: hidden" -->
<BODY style="overflow: hidden">
<!-- Row Definition -->
<form name="myGenericFunctionAssocForm">
<TABLE cellpadding="0" cellspacing="0" width="800px" height="100%">
<TR id="Section_2" style="display: inline">
<TD class="ContentHeaderSection" valign="top" align="left">
<TABLE cellspacing="0" cellpadding="0">
<TR>
<TD>
<TABLE class="Content" WIDTH="780px" cellspacing="0" cellpadding="5" bordercolor="#FFFFFF" border="1">
<TR id="no_time_period_label">
<TD WIDTH="170px"><label>No Of Periods</label><font color="red">*</font></TD>
<TD WIDTH="170px">
<SELECT id="genericFunction" onchange="createTable();">
<OPTION value="Select Generic Function">Select Generic Function</OPTION>
<OPTION value="1">1</OPTION>
<OPTION value="2">2</OPTION>
<OPTION value="3">3</OPTION>
<OPTION value="4">4</OPTION>
</SELECT>
</TD>
</TR>
<TR id="shift_timeperiod">
<TD colspan="4">
<TABLE id="shiftTable">
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR height="100%">
<TD valign="top" align="left">
<!--iframe src="TimePeriod.irpt" width="100%" height="100%" name="ifr_Content" scrolling="auto" frameborder="0" >
<p>Your browser cann't dislay iframes</p>
</iframe-->
</TD>
</TR>
</TABLE>
</form>
</BODY>
</HTML>Thanks in advance.
