前端表格选中列合计,select-chosen,set集合,display隐藏

业务涉及到table选中列合计，同时隐藏未选中列。为了减少后端请求数据，前端获得所有数据后筛选计算。

1、select下拉框初始化

1 $(function() {
2         $('.chosen-select').chosen({
3               width: "100%" //自动加宽 
4           });
5     });

select属性data-placeholder="选择。。。"未选中时水印 ；multiple="true"多选

添加option value值方便选中后js中获取set集合

2、table处理

  class="column_2">
  class="column_3">


  class="center column_2" >
  class="center column_3" >

添加class值为标签选择器使用

3、set集合

使用set集合的has()方法可以判断元素是否在其中（也可用于去重）

var selects=$('#id option:selected');
    var num=0;//选中列数
    var tbody=document.getElementById('tbodyall');
    var rows=tbody.rows; //所有行
    var grade=0;//分数和
    const selectArr = new Set();//选中列集合
    for(let k=0;k){
        selectArr.add(selects[k].value);
    }
    for(var i=0;i){
         var cells=rows[i].cells;//获得行    
         for(var j=0;j<4;j++){
             if(selectArr.has(allcolumns[j])){                    
                 $(".column_"+allcolumns[j]).attr("style"," display: '';") //display设为block后table格式被打乱
                 grade+=parseInt(cells[selects[j].value].innerHTML);//selects[j].value 选中项值
                 num++;
             }else{
                $(".column_"+allcolumns[j]).attr("style"," display: none;")        
             }
        }
        if(num==0)cells[cells.length-1].innerHTML='';//没有选中项为空值
        else {
                
        cells[cells.length-1].innerHTML=(grade/num).toFixed(2);//平均分
            }
        grade=0;
        num=0;
        }