javascript - 如何检查表的父类

Question

我已经创建了其中包含选择下拉列表的表格。现在我想根据值的选择显示输入框。这是 fiddle .

脚本:

     jQuery(".status_value").on("change", function(){

         var selDiv = jQuery(this).parent("td");
         var selVal = jQuery(this).val();
           alert("===="+selVal);
          if(selVal == 'Custom'){
             selDiv.find(".input_box").hide();
             selDiv.find(".custom").show();
         } 

         else if(selVal == 'Admin'){
          selDiv.find(".admin").show();
             selDiv.find(".input_box").hide();

         }

         else {
             selDiv.find(".input_box").hide();
             selDiv.find(".submit_value").show();
         }
     });

但我不喜欢如果我为第一行选择下拉值，输入框应该只显示那个 td。谁能建议怎么做。

Answer 1

你需要使用jQuery(this).closest("td"):

jQuery(".status_value").on("change", function(){
   var selDiv = jQuery(this).closest("td");
   var selVal = jQuery(this).val();
     alert("===="+selVal);
    if(selVal == 'Custom'){
       selDiv.find(".input_box").hide();
       selDiv.find(".custom").show();
   } 

   else if(selVal == 'Admin'){
       selDiv.find(".admin").show();
       selDiv.find(".input_box").hide();
   }

   else {
       selDiv.find(".input_box").hide();
       selDiv.find(".submit_value").show();
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" class="display dt-responsive" style="width:100%">
  <thead>
    <tr>
      <th>#</th>

      <th>Name</th>
      <th>Location</th>
      <th>Skill</th>

      <th>Resume</th>
      <th>Action</th>
      <th>Status</th>

    </tr>
  </thead>
<tbody>
                                      
  <tr>
    <td>
      <div class=" can-snum text-center"> aaa </div>
    </td>
    <td>
      <div class="c-name text-capitalize pading">bbb</div>
    </td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
   <td> 
     <form>
        <select class="can-dd status_value"  name="status">
          <option value="">STATUS</option>
          <option value="Admin">Admin</option>
           <option value="Custom">custom</option>
        </select>

    <div class="custom input_box" hidden>
    <div>
     <input  type="text" placeholder="custom"  name="custom" class="form-control select_ip">
     </div>
     <button type="submit" class="btn cal_submit_btn" >SUBMIT</button>
      </div>
     <div class="admin input_box" hidden>
        <input  type="text" placeholder="admin"  name="admin" class="form-control select_ip">
       <button type="submit" class="btn cal_submit_btn" >SUBMIT</button>
         </div>

         <div class="submit_value input_box">
      <button type="submit" class="btn submit_value_btn"  >SUBMIT</button>
        </div>
         </form>
     </td>
 </tr>                        
  <tr>
    <td>
      <div class=" can-snum text-center"> aaa </div>
    </td>
    <td>
      <div class="c-name text-capitalize pading">bbb</div>
    </td>
    <td>Edinburgh</td>
    <td>61</td>
    <td>2011/04/25</td>
    <td>$320,800</td>
   <td> 
     <form>
        <select class="can-dd status_value"  name="status">
          <option value="">STATUS</option>
          <option value="Admin">Admin</option>
           <option value="Custom">custom</option>
        </select>

    <div class="custom input_box" hidden>
    <div>
     <input  type="text" placeholder="custom"  name="custom" class="form-control select_ip">
     </div>
     <button type="submit" class="btn cal_submit_btn" >SUBMIT</button>
      </div>
     <div class="admin input_box" hidden>
        <input  type="text" placeholder="admin"  name="admin" class="form-control select_ip">
       <button type="submit" class="btn cal_submit_btn" >SUBMIT</button>
         </div>

         <div class="submit_value input_box">
      <button type="submit" class="btn submit_value_btn"  >SUBMIT</button>
        </div>
         </form>
     </td>
 </tr>
 </tbody>
</table>