如何刪除並創建它的父元素一個輸入框，如果選擇標籤改變其值

Question

我有四個的Fileds表如圖

Semester | Exam Status | GPA | Fee Status 

我的問題是：當我改變的價值在Exam_Status的Select tag->沒有清除，然後G.P.A字段可以刪除就可以了，當我選擇Cleared它可以顯示我G.P.A字段。

HTML代碼生成folloing piture輸出以下

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

並且類似地當我選擇Fee_Status - >不會被清除它可以告訴我一個輸入標籤insteat在FEE SELECT TAG的STATUS

Answer 1

這裏有一個快速的解決方案：

http://jsfiddle.net/y45ZF/2/

它目前只適用於清除/未清除的下拉菜單，而不是費用下拉菜單，但您明白了。對HTML代碼的唯一更改是，我將「examStatus」類添加到select元素，以便能夠統一處理它們。