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

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

1、select下拉框初始化

 $(function() {

         $('.chosen-select').chosen({

               width: "100%" //自动加宽

           });

     });

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

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

2、table处理

<thead>

  <th class="column_2"></th>

  <th class="column_3"></th>

</thead>

<tbody>

  <td class="center column_2" ></td>

  <td class="center column_3" ></td>

</tbody>

添加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<selects.length;k++){

        selectArr.add(selects[k].value);

    }

    for(var i=0;i<rows.length;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;

        }