前端表格表头固定

 首先，我们先看下我的html代码，我获取json数据的方法没有用框架，直接循环读取的json数据用于前台展示，个人建议不要这样弄，因为特别耗费浏览器性能。如果多刷新几次页面，后台会报，sql语句找不到表或视图。我不知道有没有这方面原因，但是建议不要用。

<div id="xxzl" style="width: 100%;height: 470px;">
    <table id="tab1"  border="1" width="100%"  cellspacing="0" cellpadding="0">
								<thead>
									<tr style="background-color: #ddd;text-align:center;" >
										<th>城市</th>
										<th>连接状态</th>
										<th>运行状态</th>
										<th>前台状态</th>
										<th>安装版本</th>
										<th>前台数量</th>
										<th>有数据前台</th>
										<th>无数据前台</th>
										<th>无记录前台</th>
									</tr>
								</thead>
								
							</table>
</div>

然后就是获取后台数据，

 $.ajax({
    	type:"POST",
    	url:'${pageContext.request.contextPath}/home/dsxxxx',
    	dataType:"json",
    	success:function(jso){
    		$(document).ready(function(){
				var s="";
				for(var i = 0; i < jso.length; i++) {
                    s = "<tr><td>" + jso[i].city + "</td><td>" + jso[i].cstatus + "</td><td>" + jso[i].pstatus + "</td><td>" + jso[i].qstatus + 
                    
                    "</td><td>" + jso[i].version + "</td><td>" + jso[i].alls + "</td><td>" + jso[i].corr + "</td><td>" + jso[i].noda + "</td><td>" + jso[i].nore + "</td></tr>";
                    $("#tab1").append(s);
                }
			})
    	}
    }) 

最后，也是最重要的，表头固定，需要使用到div的id，这里面，我有三个表格在页面上，需要重复写三次。

window.onload = function(){
    	  var tableCont = document.querySelector('#xxzl');
    	  var tableCont1 = document.querySelector('#ys');
    	  var tableCont2= document.querySelector('#yx');
    	  /**
    	   * scroll handle
    	   * @param {event} e -- scroll event
    	   */
    	  function scrollHandle (e){
    	    var scrollTop = this.scrollTop;
    	    this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
    	  }
    	
    	  tableCont.addEventListener('scroll',scrollHandle);
    	  tableCont1.addEventListener('scroll',scrollHandle)
    	  tableCont2.addEventListener('scroll',scrollHandle)
    	}