table表格固定前几列，其余的滚动
生活随笔
收集整理的這篇文章主要介紹了
table表格固定前几列，其余的滚动
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
我查了好多資料，只找到一個demo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title>new document</title><script type="text/javascript"src="http://code.jquery.com/jquery-1.6.1.min.js"></script><script type="text/javascript">function FixTable(TableID, FixColumnNumber, width, height) {if ($("#" + TableID + "_tableLayout").length != 0) {$("#" + TableID + "_tableLayout").before($("#" + TableID));$("#" + TableID + "_tableLayout").empty();} else {$("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");}$('<div id="' + TableID + '_tableFix"></div>'+ '<div id="' + TableID + '_tableHead"></div>'+ '<div id="' + TableID + '_tableColumn"></div>'+ '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");var oldtable = $("#" + TableID);var tableFixClone = oldtable.clone(true);tableFixClone.attr("id", TableID + "_tableFixClone");$("#" + TableID + "_tableFix").append(tableFixClone);var tableHeadClone = oldtable.clone(true);tableHeadClone.attr("id", TableID + "_tableHeadClone");$("#" + TableID + "_tableHead").append(tableHeadClone);var tableColumnClone = oldtable.clone(true);tableColumnClone.attr("id", TableID + "_tableColumnClone");$("#" + TableID + "_tableColumn").append(tableColumnClone);$("#" + TableID + "_tableData").append(oldtable);$("#" + TableID + "_tableLayout table").each(function () {$(this).css("margin", "0");});var HeadHeight = $("#" + TableID + "_tableHead thead").height();HeadHeight += 2;$("#" + TableID + "_tableHead").css("height", HeadHeight);$("#" + TableID + "_tableFix").css("height", HeadHeight);var ColumnsWidth = 0;var ColumnsNumber = 0;$("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {ColumnsWidth += $(this).outerWidth(true);ColumnsNumber++;});ColumnsWidth += 2;if ($.browser.msie) {switch ($.browser.version) {case "7.0":if (ColumnsNumber >= 3) ColumnsWidth--;break;case "8.0":if (ColumnsNumber >= 2) ColumnsWidth--;break;}}$("#" + TableID + "_tableColumn").css("width", ColumnsWidth);$("#" + TableID + "_tableFix").css("width", ColumnsWidth);$("#" + TableID + "_tableData").scroll(function () {$("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());$("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());});$("#" + TableID + "_tableFix").css({"overflow": "hidden","position": "relative","z-index": "50","background-color": "Silver"});$("#" + TableID + "_tableHead").css({"overflow": "hidden","width": width - 17,"position": "relative","z-index": "45","background-color": "Silver"});$("#" + TableID + "_tableColumn").css({"overflow": "hidden","height": height - 17,"position": "relative","z-index": "40","background-color": "Silver"});$("#" + TableID + "_tableData").css({"overflow": "scroll","width": width,"height": height,"position": "relative","z-index": "35"});if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {$("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());$("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);}if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {$("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());$("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);}$("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());$("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());$("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());$("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());}$(document).ready(function () {FixTable("MyTable", 2, 600, 400);});</script> </head> <body> <table style="border-bottom-color: black; border-top-color: black; width: 1000px; color: #000000; border-right-color: black; font-size: medium; border-left-color: black"id="MyTable" border="1" cellspacing="0" cellpadding="0"><thead><tr><th style="text-align: center; width: 80px" rowspan="3">姓名</th><th style="text-align: center; width: 80px" rowspan="3">班級</th><th style="text-align: center" colspan="10">成績</th></tr><tr><th style="text-align: center" colspan="3">主科</th><th style="text-align: center" colspan="3">文科</th><th style="text-align: center" colspan="3">理科</th><th style="text-align: center; width: 80px" rowspan="2">總分</th></tr><tr><th style="text-align: center; width: 80px">語文</th><th style="text-align: center; width: 80px">數學</th><th style="text-align: center; width: 80px">英語</th><th style="text-align: center; width: 80px">政治</th><th style="text-align: center; width: 80px">歷史</th><th style="text-align: center; width: 80px">地理</th><th style="text-align: center; width: 80px">物理</th><th style="text-align: center; width: 80px">化學</th><th style="text-align: center; width: 80px">生物</th></tr></thead><tbody><!-- 數據行 --><tr><td>學生32</td><td>班級1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>學生32</td><td>班級1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>學生32</td><td>班級1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>學生32</td><td>班級1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>學生32</td><td>班級1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>學生32</td><td>班級1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>學生32</td><td>班級1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>學生32</td><td>班級1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>學生32</td><td>班級1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>學生32</td><td>班級1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>學生32</td><td>班級1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>學生32</td><td>班級1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>學生32</td><td>班級1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>學生32</td><td>班級1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>學生32</td><td>班級1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr><tr><td>學生32</td><td>班級1</td><td>29</td><td>25</td><td>146</td><td>28</td><td>79</td><td>73</td><td>47</td><td>8</td><td>91</td><td>526</td></tr></tbody> </table> </body> </html>然后結合我們的項目來完成，用的vue,jquery雖然可以可以跟依賴一樣加載到vue項目中，但是只有2.0以后的版本可以，這個demo的一些語法再1.9版本已被刪除，所以只能在index.html頁面引入jquery，廢話不多說，上代碼
html:
<table id="MyTable" border='0' cellspacing='0' cellpadding='0' class='campus_table'><tbody v-for="ele in dataList" :key="ele.userid" class="pr" style="display: inline-block;"><tr><td class="tb_header">名字</td><td class="tb_header">時間</td><td v-for="time in dateList" :key="time" class="tb_header":class="{ 'holidays': getWeek(month,time) == '周六' || getWeek(month,time) == '周日'}">{{time}}日<p style='font-size:12px;color:#999;' v-text="getWeek(month,time)"></p></td></tr><tr v-for="me,i in ele.time" :key="i"><td v-if="i == 0" :rowspan="ele.span">{{ele.name}}</td><td class="abs_td">{{me}}</td><td v-for="time in dateList" :key="time" class="td_hover" :class="{ 'holidays': getWeek(month,time) == '周六' || getWeek(month,time) == '周日'}" @click="$refs.newSunmerMany.showFn(ele.name,ele.userid,nowYear,month,time,me)"></td></tr></tbody></table>js:
function FixTable(TableID, FixColumnNumber, width, height) {if ($("#" + TableID + "_tableLayout").length != 0) {$("#" + TableID + "_tableLayout").before($("#" + TableID));$("#" + TableID + "_tableLayout").empty();} else {$("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");}$('<div id="' + TableID + '_tableFix"></div>'+ '<div id="' + TableID + '_tableHead"></div>'+ '<div id="' + TableID + '_tableColumn"></div>'+ '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");var oldtable = $("#" + TableID);var tableFixClone = oldtable.clone(true);tableFixClone.attr("id", TableID + "_tableFixClone");$("#" + TableID + "_tableFix").append(tableFixClone);var tableHeadClone = oldtable.clone(true);tableHeadClone.attr("id", TableID + "_tableHeadClone");$("#" + TableID + "_tableHead").append(tableHeadClone);var tableColumnClone = oldtable.clone(true);tableColumnClone.attr("id", TableID + "_tableColumnClone");$("#" + TableID + "_tableColumn").append(tableColumnClone);$("#" + TableID + "_tableData").append(oldtable);$("#" + TableID + "_tableLayout table").each(function () {$(this).css("margin", "0");});var HeadHeight = $("#" + TableID + "_tableHead thead").height();HeadHeight += 2;$("#" + TableID + "_tableHead").css("height", HeadHeight);$("#" + TableID + "_tableFix").css("height", HeadHeight);var ColumnsWidth = 0;var ColumnsNumber = 0;$("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {ColumnsWidth += $(this).outerWidth(true);ColumnsNumber++;});ColumnsWidth += 2;if ($.browser.msie) {switch ($.browser.version) {case "7.0":if (ColumnsNumber >= 3) ColumnsWidth--;break;case "8.0":if (ColumnsNumber >= 2) ColumnsWidth--;break;}}$("#" + TableID + "_tableColumn").css("width", ColumnsWidth);$("#" + TableID + "_tableFix").css("width", ColumnsWidth);$("#" + TableID + "_tableData").scroll(function () {$("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());$("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());});$("#" + TableID + "_tableFix").css({"overflow": "hidden","position": "relative","z-index": "5","background-color": "#fff"});$("#" + TableID + "_tableHead").css({"overflow": "hidden","width": width - 17,"position": "relative","z-index": "4","background-color": "#fff"});$("#" + TableID + "_tableColumn").css({"overflow": "hidden","height": height - 17,"position": "relative","z-index": "4","background-color": "#fff"});$("#" + TableID + "_tableData").css({"overflow": "scroll","width": width,"height": height,"position": "relative","z-index": "3"});if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {$("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());$("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);}if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {$("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());$("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);}$("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());$("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());$("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());$("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());}let that = this;let clientWidth = document.body.clientWidth - 180;let clientHeight = document.body.clientHeight - 300;setTimeout(function() {FixTable("MyTable", 2, clientWidth > 600? clientWidth : 600, clientHeight > 300 ? clientHeight : 300);let myDate = new Date();let month = myDate.getMonth() + 1;let day = myDate.getDate();let week = myDate.getDay();let classPage = document.getElementById('MyTable_tableData');let left = 0;if (month == that.month) {if (day > 7) {if (that.dateList.length - day > 7) {left = 80 * (day + 2 - week);} else {left = 80 * (day + 2 - week - 7);}}classPage.scrollLeft = left;}},0);設置定時器是因為:
Vue 的官方是不建議直接操作 DOM 的，Vue 的用途在于視圖和數據的綁定。如果通過JQuery 直接操作 DOM 的話，勢必會造成視圖數據和模型數據的不匹配，這樣 Vue 就失去它存在的意義了。
JQuery 和 VueJS 合理使用并不會造成沖突，因為他們的側重點不同，VueJS 側重數據綁定和視圖組件，JQuery 側重異步請求和動畫效果。如果使用JQuery + VueJS 開發，一定要在 Vue 渲染完所有的 HTML組件之后再通過 JQuery 處理，而使用 JQuery 時應避免直接操作 DOM ，但是應用動畫是允許的。
JQuery 與 VueJS 相互配合可以非常高效的完成異步任務，首先通過 JQuery 發出 Ajax 請求，接受到服務端傳遞的 JSON 數據后，再通過 Vue 將數據綁定到組件上，最后由 JQuery 進行動畫處理，整個過程就如行云流水般自然。
說句題外話，Vue 的目的不是取代 JQuery，它是為了解決前后端分離而出現的。如果沒有數據變化，只是單純的樣式變化，則沒有必要去大費周章進行視圖模型的綁定，并且還不利于 SEO 優化。
轉載于:https://www.cnblogs.com/mxyr/p/10365727.html
總結
以上是生活随笔為你收集整理的table表格固定前几列，其余的滚动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： hive数据倾斜的解决办法
- 下一篇： SpringCloud 介绍