最终的效果需要达到像在excel中如何选中多个单元格一列的某些数据后，在这列最下方顯示求和结果：如下图：

 //每次先清除一下上次如何选中多个单元格的单元格的背景色
 
 
 
 
 
 
 
 

 
 

 
 

 mousedown：按下鼠标的时候会触发这个事件；触发这个事件的時候会赋予列mousemove和mouseup事件
 
 

 mousemove：鼠标只要移动就会触发这个事件；触发这个事件的时候将该单元格填充上背景色实现如何选中多个单元格效果
 
 

 mouseup：鼠标释放的时候就会触发这个事件；触发这个事件的时候会解除mousemove事件，不然只要鼠标移动就会将扫过的单元格填充上颜色
 
 

 
 

 最终的效果是放开鼠标就会在该列下面计算出结果，所以我将求和操作放在mouseup事件里面
 
 

 
 

 遍历表格的单元格有如何选中多个单元格背景色的话，就通过innerText获取到单元格的数据进行累加
 
 

 至于结果数据位于哪一列就用cellIndex
 
 

 3、js中两个小数相加减的时候会出现小数位多出好多位的问题，所以使用了toFixed(2)来保留小数位后2位
 
 

 4、如何选中多个单元格单元格的时候会如何选中多个单元格页面多余的内容，
 
 

 
 
 

 
 

发布了1 篇原创文章 · 获赞 4 · 访问量 405