我有这个非常简单的表。我试图根据列HIST的值隐藏行。
基本上:
我被困在这里,但我不是很远。有帮助吗?
$('#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
选择器来获得具有包含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>
你可以使用:contains()
选择器(它具有案例敏感性。)。
$('#historySelect').change(function() {
var option = $(this).val();
if (option === "No") {
$(".hist:contains('false')").parent().hide();
$(".hist:contains('true')").parent().show();
} else {
$(".hist:contains('true')").parent().hide();
$(".hist:contains('false')").parent().show();
}
});
<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>