第三種，正是本文所用的方法。目前網(wǎng)上也有多篇相關(guān)文章，但是就使用場景來說太局限了，沒有對這一類問題進行更高程度的抽象。
我想要的是：不只是表格，只要是想要鎖定的元素，只需要添加一個標(biāo)識，再最多額外寫一行代碼就可以完成批量鎖定。并且內(nèi)部實現(xiàn)代碼要盡量簡單。

用法

對需要縱向鎖定的元素添加樣式lock-col，橫向鎖定的添加lock-row。在nayiLock方法中傳入滾動的div所對應(yīng)的id。

完整例子

<!DOCTYPE>
<html>
<head>
? ? <title>鎖定</title>
? ? <meta http-equiv="X-UA-Compatible" charset="utf-8"/>
? ? <script src="../../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<style type="text/css">

table td, th{
? ? text-align: center;
? ? border:#dee9ef 1px solid;
}

</style>
<script>?
jQuery(function(){
? ? nayiLock("aDiv");
? ? //支持多級表頭的鎖定
? ? nayiLock("bDiv");

? ? //支持對多個div的鎖定
})?
//scrollDivId ? 滾動的div的id
function nayiLock(scrollDivId){
? ? jQuery("#" + scrollDivId).scroll(function(){
? ? ? ? var left = jQuery("#" + scrollDivId).scrollLeft();
? ? ? ? jQuery(this).find(".lock-col").each(function(){
? ? ? ? ? ? jQuery(this).css({"position":"relative","left":left,"background-color":"white","z-index":jQuery(this).hasClass("lock-row")?20:10});
? ? ? ? });

? ? ? ? var top = jQuery("#" + scrollDivId).scrollTop();
? ? ? ? jQuery(this).find(".lock-row").each(function(){
? ? ? ? ? ? jQuery(this).css({"position":"relative","top":top,"background-color":"white","z-index":jQuery(this).hasClass("lock-col")?20:9});
? ? ? ? });
? ? });
}


</script>
</head>
<body id="myBody">

<div id="aDiv" style="width:600px;height:200px;overflow:auto;">
? ? <div class="lock-row lock-col" >
? ? ? ? <span id="span1" >span1</span>
? ? </div>
? ? <table id="table1" style="width:800px;height:250px;" >
? ? ? ? <thead>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <th id="testTh" class="lock-col lock-row">序號</th>
? ? ? ? ? ? ? ? <th class=" lock-row">表頭1</th>
? ? ? ? ? ? ? ? <th class="lock-row">表頭2</th>
? ? ? ? ? ? </tr>
? ? ? ? </thead>
? ? ? ? <tbody>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td class="lock-col">1</td>
? ? ? ? ? ? ? ? <td class="">test</td>
? ? ? ? ? ? ? ? <td>test</td>
? ? ? ? ? ? </tr>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td class="lock-col">2</td>
? ? ? ? ? ? ? ? <td class="">test</td>
? ? ? ? ? ? ? ? <td>test</td>
? ? ? ? ? ? </tr>
? ? ? ? </tbody> ? ?
? ? </table>
</div>

<div id="bDiv" style="width:600px;height:100px;overflow:auto;">

? ? <table id="table1" style="width:800px;height:150px;">
? ? ? ? <thead>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <th colspan="2" class="lock-col lock-row">
? ? ? ? ? ? ? ? ? ? colspan="2"
? ? ? ? ? ? ? ? </th>
? ? ? ? ? ? ? ? <th class="lock-row">
? ? ? ? ? ? ? ? ? ? colspan="1"
? ? ? ? ? ? ? ? </th>
? ? ? ? ? ? </tr>

? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <th id="testTh" class="lock-col lock-row">序號</th>
? ? ? ? ? ? ? ? <th class="lock-col lock-row">表頭1</th>
? ? ? ? ? ? ? ? <th class="lock-row">表頭2</th>

? ? ? ? ? ? </tr>
? ? ? ? </thead>
? ? ? ? <tbody>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td class="lock-col">1</td>
? ? ? ? ? ? ? ? <td class="lock-col">test</td>
? ? ? ? ? ? ? ? <td>test</td>
? ? ? ? ? ? </tr>
? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? <td class="lock-col">2</td>
? ? ? ? ? ? ? ? <td class="lock-col">test</td>
? ? ? ? ? ? ? ? <td>test</td>
? ? ? ? ? ? </tr>
? ? ? ? </tbody> ? ?
? ? </table>
</div>

</body>
</html>

注：對低版本ie的兼容還是沒找到j(luò)s上的直接解決方法。建議使用expression方法。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: