jq实现表格冻结窗格的样式

其他 2021-11-20 04:33:39 阅读次数: 0

图示一（标准样式）：在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>冻结窗格</title>
	</head>
	<body>
		<table style="" id="MyTable" border="1" cellspacing="0" cellpadding="0">
			<thead>
				<tr>
					<th style="text-align: center; width: 50px;">分校</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">时间</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
				</tr>
				<tr>
					<th colspan="12">2021.10.26 - 2021.11.25</th>
				</tr>
			</thead>
			<tbody class="tbodyPlan">
				<!-- 数据行 -->
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>


				</tr>
			</tbody>
		</table>
	</body>
</html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.js"> </script>
<script type="text/javascript">
var table_h = $('#MyTable thead tr').width();
// console.log($('#MyTable thead tr').width());
$('#MyTable').width(table_h);
	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": "#f5f5f5"
		});
		$("#" + TableID + "_tableHead").css({
      
      
			"overflow": "hidden",
			"width": width - 17,
			"position": "relative",
			"z-index": "45",
			"background-color": "#f5f5f5"
		});
		$("#" + TableID + "_tableColumn").css({
      
      
			"overflow": "hidden",
			"height": height - 17,
			"position": "relative",
			"z-index": "40",
			"background-color": "#f5f5f5"
		});
		$("#" + 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", 1, 980, 500);//表id，表列数，表宽，表高
	});
</script>

图示二：
在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>冻结窗格</title>
		<style type="text/css">
			.tbodyPlan td:not(:first-child){
      
      text-align: center;}
		</style>
	</head>
	<body>
		<table style="" id="MyTable" border="1" cellspacing="0" cellpadding="0">
			<thead>
				<tr>
					<th style="text-align: center; width: 50px;">分校</th>
					<th style="text-align: center; width: 120px;">时间</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
					<th style="text-align: center; min-width:80px; max-width: 150px">课程名称</th>
				</tr>
				<tr>
					<th colspan="12">2021.10.26 - 2021.11.25</th>
				</tr>
			</thead>
			<tbody class="tbodyPlan">
				<!-- 数据行 -->
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td>1</td>
					<td>2021.10.26</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
				<tr>
					<td style="text-align: center;" colspan="2" class="total">总计</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
					<td>8</td>
					<td>9</td>
					<td>10</td>
					<td>11</td>
					<td>12</td>
					<td>13</td>
					<td>14</td>
					<td>15</td>
					<td>16</td>
				</tr>
			</tbody>
			
		</table>
	</body>
</html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.js"> </script>
<script type="text/javascript">
var table_h = $('#MyTable thead tr').width();
$('#MyTable').width(table_h);
	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", 51);
		$("#" + TableID + "_tableFix").css("width", 51);
		$("#" + TableID + "_tableData").scroll(
			function() {
      
      
				$("#" + TableID + "_tableHead").scrollLeft(
					$("#" + TableID + "_tableData").scrollLeft());
			$("#" + TableID + "_tableData").scrollLeft()>10 ? $('.total').css('text-align','left') :$('.total').css('text-align','center');
				$("#" + TableID + "_tableColumn").scrollTop(
					$("#" + TableID + "_tableData").scrollTop());
			});
		$("#" + TableID + "_tableFix").css({
      
      
			"overflow": "hidden",
			"position": "relative",
			"z-index": "50",
			"background-color": "#f5f5f5"
		});
		$("#" + TableID + "_tableHead").css({
      
      
			"overflow": "hidden",
			"width": width - 17,
			"position": "relative",
			"z-index": "45",
			"background-color": "#f5f5f5"
		});
		$("#" + TableID + "_tableColumn").css({
      
      
			"overflow": "hidden",
			"height": height - 17,
			"position": "relative",
			"z-index": "40",
			"background-color": "#fff"
		});
		$("#" + 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", 1, 1010, 500);//表id，表列数，表宽，表高
	});
</script>

猜你喜欢

转载自blog.csdn.net/baidu_39043816/article/details/121330547
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022