I have a table with with four fileds as shown in figure
Semester | Exam Status | GPA | Fee Status
My question is that: When I change the value in Exam_Status the Select tag-> is not cleared then G.P.A field can be removed on this, and when I select Cleared it can show me G.P.A field.
HTML code which generate folloing piture output is following
<table cellspacing="0" cellpadding="0" border="0">
<thead>
<tr>
<th>Semester</th>
<th>Cleared/Not Cleaerd</th>
<th>G.P.A</th>
<th>Fee Status</th>
</tr>
</thead>
<tbody>
<script type="text/javascript"></script>
<tr>
<td>1<sup>st</sup> Semester</td>
<td>
<select name="fexam_status" id="waqas">
<option selected="selected">Select Here</option>
<option value="Cleared">Cleared</option>
<option value="Not Cleared">Not Cleared</option>
</select>
</td>
<td>
<div class="gpa" id="work">
<div class="right">
<input class="spin-dec" type="text" name="fgpa" value="3.00" min="1.00" max="4.00" />
</div>
</div>
</td>
<td>
<select name="ffee_status">
<option value="Cleared">Cleared</option>
<option value="Not Cleared">Not Cleared</option>
</select>
<a class="deleteRow" style="margin-left: 10px;"><img src="gfx/deletered.png" /></a>
</td>
</tr>
<tr>
<td>2<sup>nd</sup> Semester</td>
<td>
<select name="sexam_status">
<option selected="selected" value="Cleared">Cleared</option>
<option value="Not Cleared">Not Cleared</option>
</select>
</td>
<td>
<div class="gpa">
<div class="right">
<input class="spin-dec" type="text" name="sgpa" value="3.00" min="1.00" max="4.00" />
</div>
</div>
</td>
<td>
<select name="sfee_status">
<option selected="selected" value="Cleared">Cleared</option>
<option value="Not Cleared">Not Cleared</option>
</select>
<a class="deleteRow" style="margin-left: 10px;"><img src="gfx/deletered.png" /></a>
</td>
</tr>
<tr>
<td>3<sup>rd</sup> Semester</td>
<td>
<select name="texam_status">
<option selected="selected" value="Cleared">Cleared</option>
<option value="Not Cleared">Not Cleared</option>
</select>
</td>
<td>
<div class="gpa">
<div class="right">
<input class="spin-dec" type="text" name="tgpa" value="3.00" min="1.00" max="4.00" />
</div>
</div>
</td>
</tr>
</tbody>
</table>
and similarly when i select Fee_Status-> not cleared it can show me a input tag insteat of SELECT TAG in FEE STATUS
Here’s a quick solution:
http://jsfiddle.net/y45ZF/2/
It currently only works for the Cleared/Not Cleared drop downs, not for the Fee drop downs, but you get the point. The only change to your HTML code was that I added the “examStatus” class to the select elements to be able to treat them all in a unified way.