我有一个表来显示数据(品牌名称,位置表格,值等)。指示我创建包含复选框的过滤器。
当用户选中一个复选框时,仅显示与这些复选框有关的列。如果用户选中多个复选框,则仅显示与这些复选框有关的列。
如果选中了多个复选框,我遇到的问题是显示多列。我该如何实现?
以下是表格:
<table class="equipTable" id="myTable">
<thead>
<tr>
<th class="brandName">Brand Name</th>
<th class="makeModelNo">Make/Model No</th>
<th class="serialNumber">Serial Number</th>
<th class="assetTag">Asset Tag</th>
<th class="locationFrom">Location From</th>
<th class="company">Company</th>
<th class="value">Value</th>
<th class="lastModified">Last Modified</th>
</tr>
</thead>
<cfoutput query="EquipD">
<tbody>
<tr>
<td class="brandName">
<div style="float: left">
<a href="javascript:poptasticcnotes('IT_Decomm_Print.cfm?EquipID=#EquipID#');" title="Test Print">
<img src="images/printers-and-faxes-icon_sm.png" alt="Print this record" class="no-border" />
</a>
</div>
<div style="margin-left: 5px; margin-top: 10px; float: left">#BName#</div>
</td>
<td class="makeModelNo">#Model#</td>
<td class="serialNumber"><a href="mtn_EquipD.cfm?a=s&id=#EquipID#">#SNo#</a></td>
<td class="assetTag">#ATag#</td>
<td class="locationFrom">#LFrom#</td>
<td class="company">#Company#</td>
<td class="value">#CValue#</td>
<td class="lastModified">#EquipD.SubmitBy# <br>#DateFormat("#EquipD.ESubmitDt#", "mm/dd/yyyy")#</em></td>
</tr>
<tr>
<td colspan="8" id="resForSub"><strong><u>REASON</u>: </strong>#ReasonD#</td>
</tr>
</tbody>
</cfoutput>
下面的jquery代码:
$(document).ready(function() {
$('input[type="checkbox"]').click(function(){
var checkBoxes = "", chkBoxesSelected = new Array();
var idsChecked = {BrandName: 'brandName', makeModelNo: 'makeModelNo', SerialNumber: 'serialNumber', AssetTag: 'assetTag', LocationForm: 'locationFrom', Company: 'company', Value: 'value', LastModified: 'lastModified'};
//console.log(x);
$('input[type=checkbox]').each(function () {
checkBoxes += $(this).attr('id') + "-" + (this.checked ? "checked" : "not checked") + "/";
});
chkBoxesSelected = checkBoxes.split("/");
for(var x = 0; x < chkBoxesSelected.length; x++){
var temp = chkBoxesSelected[x];
for(var c = 0; c < idsChecked.length; c++){
var temp2 = idsChecked[c];
if(temp == temp2){
//show the columns that are have checkbox checked
}else{
//don't show the columns that do not have checkbox checked
}
}
}
//console.log(chkBoxesSelected);
});
});
答案 0 :(得分:1)
您不必跟踪显示的列或不显示的列。在复选框上使用change
事件。为复选框提供值属性。 value属性的值应该是要显示或隐藏的列的类选择器。然后根据是否选中该复选框,显示或隐藏该复选框连接到的列。
默认情况下,您可以隐藏列并在要显示它们时向它们添加一个类。 请查看下面的示例以了解其工作原理。
$(document).ready(function() {
let $form = $('.toggles');
function toggleColumn(event) {
let $checkbox = $(event.target);
let value = $checkbox.val();
let $target = $(`.${value}`);
if ($checkbox.is(':checked')) {
$target.addClass('show');
} else {
$target.removeClass('show');
}
}
$form.on('change', toggleColumn);
});
table {
border-collapse: collapse;
margin-bottom: 50px;
}
table, th, td {
border: 1px solid black;
}
th, td {
display: none;
padding: 5px;
}
th.show, td.show {
display: table-cell;
}
.toggles {
display: flex;
flex-direction: column;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th class="brandName">Brand Name</th>
<th class="makeModelNo">Make/Model No</th>
<th class="serialNumber">Serial Number</th>
<th class="assetTag">Asset Tag</th>
<th class="locationFrom">Location From</th>
<th class="company">Company</th>
<th class="value">Value</th>
<th class="lastModified">Last Modified</th>
</tr>
</thead>
<tbody>
<tr>
<td class="brandName">#Brandname#</td>
<td class="makeModelNo">#Model#</td>
<td class="serialNumber">#SNo#</td>
<td class="assetTag">#ATag#</td>
<td class="locationFrom">#LFrom#</td>
<td class="company">#Company#</td>
<td class="value">#CValue#</td>
<td class="lastModified">#EquipD.SubmitBy</td>
</tr>
</tbody>
</table>
<form class="toggles">
<label>
<span>Brandname</span>
<input type="checkbox" name="toggle[]" value="brandName">
</label>
<label>
<span>makeModelNo</span>
<input type="checkbox" name="toggle[]" value="makeModelNo">
</label>
<label>
<span>serialNumber</span>
<input type="checkbox" name="toggle[]" value="serialNumber">
</label>
<label>
<span>assetTag</span>
<input type="checkbox" name="toggle[]" value="assetTag">
</label>
<label>
<span>locationFrom</span>
<input type="checkbox" name="toggle[]" value="locationFrom">
</label>
<label>
<span>company</span>
<input type="checkbox" name="toggle[]" value="company">
</label>
<label>
<span>value</span>
<input type="checkbox" name="toggle[]" value="value">
</label>
<label>
<span>lastModified</span>
<input type="checkbox" name="toggle[]" value="lastModified">
</label>
</form>