我有一个包含多个标题行的表,如下所示:
color
我想让用户能够选择他们想要看的字段,所以如果他们只想看到Ct& Ttl,然后第一行的colspan需要调整。我的下面的代码片段是"几乎"工作,问题是,有时在检查或取消选中一个字段后,新的计数是错误的 - 它将留在"旧计数"。如上所述,初始colspan是3,用户取消选中其中一个框,colspan应该下降到2,但它将保持为3.然后,用户可以取消选中第二个框,并且计数将赶上并且正确显示1.我的代码遗漏了什么吗?
Row 1: Month 1 Month 2 Month3
Row 2: Ct % Ttl Ct % TTl Ct % TTl

var options = [];
$(document).on('click', '.dropdown-menu a', function(event) {
var $target = $(event.currentTarget),
val = $target.attr('data-value'),
column = 'table .' + val,
$inp = $target.find('input'),
idx;
if ((idx = options.indexOf(val)) > -1) {
options.splice(idx, 0);
setTimeout(function() {
$inp.prop('checked', true)
}, 0);
} else {
options.push(val);
setTimeout(function() {
$inp.prop('checked', false)
}, 0);
}
$(column).toggle();
var ct = $("#ddColFilter input:checked").length;
$("#tb").val(ct);
$(".topRow").attr("colspan", parseInt(ct));
$(event.target).blur();
return false;
});

答案 0 :(得分:0)
您有两个问题:
var options = [];
$(document).on('click', '.dropdown-menu a', function(event) {
var $target = $(event.currentTarget),
val = $target.attr('data-value'),
column = 'table .' + val,
$inp = $target.find('input'),
idx;
if ((idx = options.indexOf(val)) > -1) {
options.splice(idx, 1);
setTimeout(function() {
$inp.prop('checked', true);
updateCount();
}, 0);
} else {
options.push(val);
setTimeout(function() {
$inp.prop('checked', false)
updateCount();
}, 0);
}
$(column).toggle();
$(event.target).blur();
return false;
});
function updateCount()
{
var ct = $("#ddColFilter input:checked").length;
$("#tb").val(ct);
$(".topRow").attr("colspan", parseInt(ct));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-1 button-group" style="padding-top: 12px; padding-bottom: 1px; margin-bottom: 1px;">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> Filter Columns <span class="caret"></span>
</button>
<ul id="ddColFilter" class="dropdown-menu">
<li>
<a href="#" class="small underlineText_No" data-value="attRate" tabindex="-1">
<input type="checkbox" checked="checked" /> Attendance Rate</a>
</li>
<li>
<a href="#" class="small underlineText_No" data-value="enrDays" tabindex="-1">
<input type="checkbox" checked="checked" /> Ttl Enrollment Days</a>
</li>
<li>
<a href="#" class="small underlineText_No" data-value="msdDays" tabindex="-1">
<input type="checkbox" checked="checked" /> Ttl Missed Days</a>
</li>
<li>
<a href="#" class="small underlineText_No" data-value="lstRev" tabindex="-1">
<input type="checkbox" checked="checked" /> Lost Revenue</a>
</li>
<li>
<a href="#" class="small underlineText_No" data-value="lstHrs" onclick="" tabindex="-1">
<input type="checkbox" checked="checked" /> Instrl Hrs Lost</a>
</li>
</ul>
</div>
<div>
<input id="tb" type="text" value="5" />
</div>