table表头固定

最新推荐文章于 2020-01-20 10:00:13 发布

jununc

最新推荐文章于 2020-01-20 10:00:13 发布

阅读量273

点赞数

分类专栏： js/html

本文链接：https://blog.csdn.net/jununc/article/details/49360681

版权

js/html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

fixedTbTHead.js

(function($) {
	var TABLE_ID = 0;
	$.fn.fixedThead = function(params) {
		var idObj = '';
		function fixedThead(e) {
			if ($(e).length > 0 && $(e)[0].tagName.toLowerCase() == "table"
					&& $(e).find('thead').length > 0) {
				var $t = $(e), $w = $(window), $thead = $t.find('thead');
				if ($t.height() < params.height) {
					return;
				}
				idObj = $t.attr('id') || ('tbl-' + (++TABLE_ID));
				$t.wrap('<div id="scoll_' + idObj + '" style="height:'
						+ params.height
						+ ';overflow-y:scroll;position:relative;" />');
				$t.before('<div id="head_' + idObj + '" style="left:0px;top:0px;display:block;position:absolute" />');
				$("#head_" + idObj).append(
						$(e).clone().removeAttr("id").empty().append(
								$thead.clone()));
				$t.find('thead th').each(
						function(i) {
							$("#head_" + idObj).find('th').eq(i).width(
									$(this).width());
						});
				$t.find('thead td').each(
						function(i) {
							$("#head_" + idObj).find('td').eq(i).width(
									$(this).width());
						});
				$("#scoll_" + idObj).width($t.width());
				$("#head_" + idObj).width($t.width());
				
				$("#scoll_" + idObj).on(
						'scroll',
						function() {
							$("#head_" + idObj).css("top",
									$("#scoll_" + idObj).scrollTop());
				});
			}
		};

		return this.each(function(i, e) {
			fixedThead(e);
		});
	};
})(jQuery);

HTML:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>固定表头</title>
<script  type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script  type="text/javascript" src="js/jquery.fixedTbThead.js"></script>
<style>
   table{border:0 solid gray;border-collapse:collapse;} 
   th{height:29px;text-align:center;border:1 solid gray;background-color:#ddd;} 
   td{width:100px;height:29px;text-align:center;border:1 solid gray;background-color:#cfc;}
</style>

<script language="javascript" type="text/javascript">
$(document).ready(function () {
               $("#testTable").fixedThead({'height':'200px'});
});
</script>
</head>

<body>
		<table id="testTable">
			<thead>
				<tr><th>序号</th><th>姓名</th><th>性别</th><th>年龄</th></tr>
			</thead>
				<tr><td>1</td><td>张3</td><td>男</td><td>20</td></tr>
				<tr><td>2</td><td>李4</td><td>男</td><td>30</td></tr>
				<tr><td>3</td><td>李4</td><td>男</td><td>30</td></tr>
				<tr><td>4</td><td>李4</td><td>男</td><td>30</td></tr>
				<tr><td>5</td><td>李4</td><td>男</td><td>30</td></tr>
				<tr><td>6</td><td>李4</td><td>男</td><td>30</td></tr>
				<tr><td>7</td><td>李4</td><td>男</td><td>30</td></tr>
				<tr><td>8</td><td>李4</td><td>男</td><td>30</td></tr>
				<tr><td>9</td><td>李4</td><td>男</td><td>30</td></tr>
				<tr><td>10</td><td>李4</td><td>男</td><td>30</td></tr>
				<tr><td>11</td><td>李4</td><td>男</td><td>30</td></tr>
				<tr><td>12</td><td>李4</td><td>男</td><td>30</td></tr>
				<tr><td>13</td><td>李4</td><td>男</td><td>30</td></tr>
				<tr><td>14</td><td>李4</td><td>男</td><td>30</td></tr>
				<tr><td>15</td><td>李4</td><td>男</td><td>30</td></tr>
				<tr><td>16</td><td>李4</td><td>男</td><td>30</td></tr>
				<tr><td>17</td><td>李4</td><td>男</td><td>30</td></tr>
				<tr><td>18</td><td>李4</td><td>男</td><td>30</td></tr>
				<tr><td>19</td><td>李4</td><td>男</td><td>30</td></tr>
				<tr><td>20</td><td>李4</td><td>男</td><td>30</td></tr>
		</table>
</body>
</html>