我有一张非常简单的表格。我正在尝试根据列 HIST 的值隐藏行。
基本上:
- 如果 select 说不,只显示 HIST = false 的行
- 如果 select 说是,则显示所有行(无论是假还是真)
我被困在这里,但我离这里不远。有帮助吗?
$('#historySelect').change(function() {
var option = $(this).val();
if (option === "No") {
} else {
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Show History
<select id="historySelect">
<option value="Yes">No</option>
<option value="No">Yes</option>
</select>
</label>
<table class="table dataTable no-footer" id="dataTable" cellspacing="0" width="100%" role="grid" aria-describedby="dataTable_info" style="width: 100%;">
<thead>
<tr role="row">
<th class="text-center text-primary sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" style="width: 66px;">Name</th>
<th class="text-center text-primary hidden sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Historic: activate to sort column ascending" style="width: 0px;">Historic</th>
</tr>
</thead>
<tbody>
<tr class="text-center hover-table odd" role="row">
<td>Name</td>
<td class="hist hidden">true</td>
</tr>
<tr class="text-center hover-table odd" role="row">
<td>Name</td>
<td class="hist hidden">false</td>
</tr>
</tbody>
</table>
最佳答案
首先请注意,您交换了 option
元素的值和文本。
要实现您的要求,您可以将 has()
与 :contains
选择器结合使用,以获得具有 a 的 tr
元素.hist
元素包含 false
。然后你可以根据需要show()
或者hide()
,像这样:
$('#historySelect').change(function() {
var $rows = $('#dataTable tbody tr');
if ($(this).val() === "No") {
$rows.hide().has('.hist:contains(false)').show();
} else {
$rows.show();
}
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Show History
<select id="historySelect">
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</label>
<table class="table dataTable no-footer" id="dataTable" cellspacing="0" width="100%" role="grid" aria-describedby="dataTable_info" style="width: 100%;">
<thead>
<tr role="row">
<th class="text-center text-primary sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" style="width: 66px;">Name</th>
<th class="text-center text-primary hidden sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Historic: activate to sort column ascending" style="width: 0px;">Historic</th>
</tr>
</thead>
<tbody>
<tr class="text-center hover-table odd" role="row">
<td>Name</td>
<td class="hist hidden">true</td>
</tr>
<tr class="text-center hover-table odd" role="row">
<td>Name</td>
<td class="hist hidden">false</td>
</tr>
</tbody>
</table>
关于javascript - 根据选择中的选项更改元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49751853/