业务涉及到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处理
<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; }
前端表格选中列合计,select-chosen,set集合,display隐藏
原文:https://www.cnblogs.com/nisam/p/11972879.html