原生js实现在表格用鼠标框选并有反选功能

今天应同学要求,需要写一个像Excel那样框选高亮,并且实现框选区域实现反选功能。要我用原生js写,由于没什么经验翻阅了很多资料,第一次写文章希望各位指出不足!!
【原生js实现在表格用鼠标框选并有反选功能】上来先建表

以下省略十行……
  水果 蔬菜
苹果 菠菜
白菜
葡萄 萝卜
桃子 土豆
苹果 菠菜

样式
body {padding: 0; margin: 0; overflow-y: hidden; } .table {width: 990px; height: 850px; } .table tr {height: 50px; overflow: scroll} .table-container { position: absolute; top: 0; left: 200px; height: 750px; width: 990px; overflow-y: scroll; overflow-x: hidden; } #title {background-color: #BDE4F4; } .fileDiv {background-color:#FEFF89; } .seled {border: 1px solid red; background-color: #D6DFF7; }

效果

原生js实现在表格用鼠标框选并有反选功能
文章图片

重头戏js部分开始

原生js实现在表格用鼠标框选并有反选功能
文章图片
效果动态图.gif

    推荐阅读