jQuery实现表格冻结窗口

最新推荐文章于 2021-11-15 11:02:19 发布
最新推荐文章于 2021-11-15 11:02:19 发布
阅读量311 收藏 1
点赞数 2
文章标签： jquery table 冻结窗口 
<!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>Insert title here</title>
</head>
<body>
	<table
		style="border-bottom-color: black; border-top-color: black; width: 2300px; 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"></th>
				<th style="text-align: center" colspan="6">项目基本信息</th>
				<th style="text-align: center" colspan="4">合同约定回款计划</th>
				<th style="text-align: center" colspan="3">实际回款情况</th>
				<th style="text-align: center" colspan="2">逾期回款</th>
				<th style="text-align: center" colspan="12">实际回款计划</th>
			</tr>
			<tr>
				<th style="text-align: center; width: 40px">序号</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>
				<th style="text-align: center; width: 80px">回款日期</th>
				<th style="text-align: center; width: 80px">回款金额</th>
				<th style="text-align: center; width: 100px">已收款金额/元</th>
				<th style="text-align: center; width: 110px">分阶段回款完成情况</th>
				<th style="text-align: center; width: 100px">已付款比例合计</th>
				<th style="text-align: center; width: 100px">延期说明</th>
				<th style="text-align: center; width: 100px">逾期未付合计/元</th>
				<th style="text-align: center; width: 80px">2017年1月</th>
				<th style="text-align: center; width: 80px">2017年2月</th>
				<th style="text-align: center; width: 80px">2017年3月</th>
				<th style="text-align: center; width: 80px">2017年4月</th>
				<th style="text-align: center; width: 80px">2017年5月</th>
				<th style="text-align: center; width: 80px">2017年6月</th>
				<th style="text-align: center; width: 80px">2017年7月</th>
				<th style="text-align: center; width: 80px">2017年8月</th>
				<th style="text-align: center; width: 80px">2017年9月</th>
				<th style="text-align: center; width: 80px">2017年10月</th>
				<th style="text-align: center; width: 80px">2017年11月</th>
				<th style="text-align: center; width: 80px">2017年12月</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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>
				<td>17</td>
				<td>18</td>
				<td>19</td>
				<td>20</td>
				<td>21</td>
				<td>22</td>
				<td>23</td>
				<td>24</td>
				<td>25</td>
				<td>26</td>
				<td>27</td>
				<td>28</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">
	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", 8, 980, 500);
	});
	</script>

不语zzz
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现冻结表格行和列
10-24
本文给大家分享的是前些日子做的项目中的一个客户的特殊要求，很少遇到，查询了好久的度娘，才算找到解决方案，这里分享给大家，有需要的小伙伴可以参考下。
jQuery实现表格冻结顶栏效果
10-19
昨天晚上公司遇到个小需求，就是实现类似表格冻结顶栏的效果。这篇文章主要介绍了jQuery实现表格冻结顶栏效果 ,需要的朋友可以参考下
jq实现表格冻结窗格的样式
farmerXU的博客
11-15 507
图示： <!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> </
使用jQuery锁定/冻结网页
01-12 689
本教程告诉你如何设置你的网页一个jQuery计时器锁定界面的特定时间内处理。 在这个例子中，当用户点击打开一个网站，它在另一个窗口/选项卡中打开，原来的网页被冻结在指定的时间长度。 这是因为我希望用户查看的网站在新视窗/分页，他们被迫等待，可能会更倾向于看看打开的窗口中的源网页锁定手段。 查看现场演示 下载源文件 演示网址：http://www.sitepoint.com/wp-cont...
jQuery插件：冻结表头（类似Excel的冻结窗格功能）
weixin_30332241的博客
07-14 245
Microsoft Excel 的冻结窗格功能非常好，用户经常要求在Web页面的表格也具有这样的功能。百度，谷歌和yahoo之后，没有好用的，于是自己开发了一个jQuery插件来实现冻结表头的功能。 使用方法: $(".table").freeze(); freeze方法接受一个参数option对象，包括如下选项： width: 指定表格宽度，缺省400px。 height: 指定...
html+jquery 冻结表格表头
lluohuih的专栏
10-08 3884
column1      column2      column3      column4      column5           //设置列表显示（冻结表头） $(function() { var TableID = "dataShowTblPanel"; var height = $("#tableListPanel").heigh
jQuery实现冻结表头的方法
10-24
jQuery 提供了一种灵活的方式来实现这一需求，通过扩展 jQuery 对象的方法来创建一个能够冻结表头的插件。以下是一个关于如何使用 jQuery 实现冻结表头的详细说明。 首先，我们了解 jQuery 的 `.CloneTableHeader` ...
网页表格冻结示例，jquery实现
03-29
网页表格在展示大量数据时是不可或缺的工具...总的来说，使用jQuery实现网页表格冻结是一种常见的技术实践，它提升了用户在查看大量数据时的阅读体验。通过熟练掌握这个技巧，你可以为你的网页应用增添更多实用的功能。
jQuery对表格的列冻结
08-29
本教程将详细讲解如何使用jQuery实现表格的列冻结功能，并重点考虑在低版本IE浏览器中的兼容性。 首先，我们需要理解jQuery库。jQuery是一款高效、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及...
JQuery 登录窗口_后面窗口锁定
limlimlim的专栏
07-08 1971
body         {             margin:0px;             padding:0px;             }         #shadow         {             width:100%;             height:100%;             opacity:0.2;            
jQuery实现表格冻结行和列
Allec Cui的博客
06-19 1万+
前几天，遇到一个需求是要将表格的前几行和前几列冻结即固定，就是在有滚动条的情况下，保持那几行和那几列固定，这个需求其实是一个非常常见的需求，因为在涉及好多行和列时，在拖动滚动条时，我们需要知道每行每列表示的是什么意思，当被遮挡后，就很难记住是表示的什么内容了，如下图所示：我想要保持学生姓名和在线状态保持不动，以及前三行表示章节以及微课习题的内容保持不变，当然在easyui或者其他的一些插件里这种特
利用jquery实现的表格冻结列(固定列)功能
热门推荐
Akuma专栏
04-23 1万+
  有时候希望一个表格当内容超出了之后，有滑动条，并且希望在滑动的时候某几列固定不动，下面介绍一种利用jquery动态修改列的属性的方法实现的冻结列（固定列）功能:下面的jquery文件路径读者可以自己根据自己的情况更改一下O(∩_∩)O~&lt;html&gt;&lt;head&gt;        &lt;title&gt;表格的冻结列实现&lt;/title&gt;&lt;script sr...
TableFreeze.js（基于JQuery的表格冻结插件）
Christopher的博客
10-24 5378
TableFreeze.js（基于JQuery的表格冻结插件） 声明：该插件在原插件的基础上增加了冻结尾列的功能，由于此插件为github找不到开源地址，原始版本的插件作者及其修改信息如下： ** 名称:JQeury实现表格行列冻结 ** ** 作者:YJJ ** ** 时间:2014年4月16日 ** ** 修改人：Allen ** ** 修改时间:2017-06-10 ** ** 修改记录:...
html如何冻结字段,利用jQuery实现HTML 表格行列冻结
weixin_35916239的博客
05-30 803
摘要：行列冻结是处理表格非常常见的应用，我们都知道用excel可以很轻松的实现这一功能。但html编写的web网页表格中并没有冻结表格这一功能，那又要如何才能实现表格的 行 列 冻结呢？ 行列冻结是处理表格非常常见的应用，我们都知道用excel可以很轻松的实现这一功能。但html编写的web网页表格中并没有冻结表格这一功能，那又要如何才能实现表格的'行''列'冻结呢？通过百度或者其...
jQuery滚动表格-->固定表头 + 冻结窗格效果
Ice Yang的博客
01-20 1980
下载地址：https://github.com/ybx13579/fixed-Header-Table 效果图：
HTML表头冻结
anjun_xf的专栏
08-15 5749
html冻结表头方案： HTML Table锁定表头（CSS实现）–可以但是不傻瓜。 表头冻结–纯jQuery，支持横、竖出现滚动条 jquery固定表头不滚动让内容滚动的代码实现——里面jQuery可以放到js文件引用，此版最接近实际需求，不用加太多css。如果没有可以通过key“Praesent vitae ligula nec orci pretium vestibulum”在百度上搜索...
使用Jquery实现table行冻结
Akuma专栏
04-25 1903
&lt;html&gt;&lt;head&gt;        &lt;title&gt;表格的首行冻结实现&lt;/title&gt;&lt;script src="jquery-3.1.0.min.js" type="text/javascript"&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt; 
HTML实现冻结表格效果
接下来，函数利用jQuery选择器和操作方法将原表格的表头复制到辅助容器中，并设置容器的滚动属性，以实现冻结效果。 这个方法可以冻结表头，但如果需要冻结列，可以稍微调整代码，复制固定列的行并插入到辅助容器中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值