Javascript 为动态创建的表获取每次更新的列数计数

我有一个动态生成的表，其中有一个过滤器来选择哪些列是可见的。我需要一个表中可见列的动态计数，它将输入代码的另一部分，但是，当我使用过滤器更改可见列时，我使用的计数编码不会更新计数

我尝试了两种方法来获取列计数：

1） 所选列筛选器选项的计数：

jQuery(document).ready(function ($) {
        var OptionSelected = $("#ColumnCheckbox option:selected").length;
    console.log(OptionSelected);
    });

2） 列标题计数：

jQuery(document).ready(function ($) {
        var ColumnsSelected = $("table.CompTable thead > tr > th:not(:first)").length;
    console.log(ColumnsSelected);
    });

但是，在这两种情况下，过滤列时计数都不会更改。（计数显示在下面工作代码的“控制台”中）

是否有其他方法可以让计数在每次列增加和减少时动态更改

完成以下工作代码：

jQuery（文档）.ready（函数（$）{
var StatJSON={
“三星”：{
“排名”：“#3”，
“评级”：“2.5”，
“距离”：“30”，
“旅行时间”：“400”，
“高度（米）”：“200”，
“面积”：“250”
},
“Mi”：{
“排名”：“#2”，
“评级”：“3.5”，
“距离”：“20”，
“旅行时间”：“150”，
“高度（米）”：“0”，
“面积”：“不适用”
},
“苹果”：{
“排名”：“#1”，
“评级”：“4.5”，
“距离”：“50”，
“旅行时间”：“300”，
“高度（米）”：“不适用”，
“面积”：“200”
},
“LG”：{
“排名”：“#1”，
“评级”：“4.5”，
“距离”：“50”，
“旅行时间”：“300”，
“高度（米）”：“不适用”，
“面积”：“200”
}
};
jQuery（“#btnSubmit”）。单击（函数（）{
var数据=[]；
jQuery（“#selection”）.find（“：selected”）.each（函数（e）{
var this_input=jQuery（this）；
如果（此输入为（':selected'））{
data.push（这个输入.val（））；
}
});
$（'#divResult'）.empty（）.append（打印表（数据））；
jQuery（文档）.ready（函数（$）{
jQuery（“#divResult table tbody tr”）.find（“td:first”）.each（函数（$）{
jQuery（this）.addClass（（（this.textContent）.split（“”）。join（“”）。replace（‘#’，“”）。replace（//[（）]/g'，）。replace（//g'，）；
jQuery（this.this（'td'）.addClass（（（this.textContent）.split（“”）。join（“”）。replace（'#'，''）。replace（//[（）]/g'，）。replace（//g'，）；
jQuery（this.parent（'tr'）.addClass（（（this.textContent）.split（“”）。join（“”）。replace（'#'，''）。replace（//[（）]/g'，）。replace（//g'，）；
});
jQuery（'.divResult表th:not（：first）'）。每个（函数（$）{
jQuery（this）.addClass（jQuery（this）.text（）.split（“”.join（“”））；
jQuery（this.attr（“name”），this.textContent.split（“”）.join（“”）；
});
jQuery（'.divResult表th:first child'）.removeClass；
jQuery（'.divResult表th:first child'）.removeAttr（'name'）；
jQuery（'table thead th[class]'）。每个（函数（）{
$（'table tbody td:nth child（+（$（this.index（）+1）+'））.addClass（this.className）
});
jQuery（文档）.ready（函数（$）{
var数据=[]；
jQuery（'#divResult表thead:not（：first'）。每个（函数（）{
data.push（jQuery（this.text（））；
功能列（数据）{
var html=''；
每个（数据、函数（索引、值）{
html+=''+值+''
});
返回html；
}
jQuery（'#ColumnCheckbox'）.empty（）.append（Column（data））；
});
});
jQuery（'#FilterDiv'）.show（）；
$（“#ColumnCheckbox”）.change（函数（）{
var options=$（this.find（“option”）；
var OptionSelected=$（this.find（“option”）.prop（“selected”）；
$。每个（选项、函数（i、val）{
var selected=$（this.prop（“selected”）；
var currentClass=$（this.attr（“类”）；
如果（所选==false）{
$（“table.CompTable thead tr th.+currentClass）.hide（）；
$（“table.CompTable tbody tr td.+currentClass）.hide（）；
}否则{
$（“table.CompTable thead tr th.+currentClass）.show（）；
$（“table.CompTable tbody tr td.+currentClass）.show（）；
}
});
});
jQuery（文档）.ready（函数（$）{
var options selected=$（“#ColumnCheckbox option:selected”）。长度；
console.log（选项已选择）；
});
jQuery（文档）.ready（函数（$）{
var ColumnsSelected=$（“table.CompTable thead>tr>th:not（：first）”）。长度；
console.log（选择列）；
});
});
});
函数打印表（数据）{
var html=''；
if（数据和数据长度）{
html+=''；
每个（数据，函数（k，v）{
html+=''+v+''；
});
html+=''；
html+=''；
每个（StatJSON[data[0]]，函数（k，v）{
html+=''+k+''；
jQuery.each（数据、函数（k2、v2）{
html+=''+StatJSON[data[k2]][k]+''；
});
html+=''；
});
}else{html+='未找到结果'；}
html+=''；
返回html；
}
});
jQuery（函数（$）{
$.fn.select2.amd.require([
“选择2/选择/单个”，
'选择2/选择/占位符'，
“select2/selection/allowClear”，
“选择2/下拉列表”，
'选择2/下拉/搜索'，
'选择2/下拉列表/附件'，
'选择2/utils'
]，函数（单一选择、占位符、AllowClear、下拉列表、下拉搜索、附件正文、UTIL）{
var SelectionAdapter=Utils.decoration(
单选，
占位符
);
SelectionAdapter=Utils.decoration(
选择适配器，
AllowClear
);
var DropdownAdapter=Utils.decoration(
装饰(
下拉列表，
下拉搜索
),
附件
);
var ColumnSelected=$（“#ColumnCheckbox”）
$（选定列）。选择2({
宽度：“40%”，
占位符：“选择多个项目”，
选择适配器：选择适配器，
dropdownAdapter:dropdownAdapter，
allowClear:是的，
templateResult:函数（数据）{
如果（！data.id）{return data.text；}
var$r