首页 > 其他 > 详细

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

时间:2019-12-02 21:49:58      阅读:92      评论:0      收藏:0      [点我收藏+]

业务涉及到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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!