我已经创建了其中包含选择下拉列表的表格。现在我想根据值的选择显示输入框。这是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。谁能建议一下该怎么做。
最佳答案
您需要使用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>
关于javascript - 如何检查表的父类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51363642/