ホームページ >ウェブフロントエンド >jsチュートリアル >固定テーブルヘッダーとスクロール可能な列の効果_JavaScript スキル

固定テーブルヘッダーとスクロール可能な列の効果_JavaScript スキル

WBOYオリジナル: 2016-05-16 19:07:471151ブラウズ

テーブルのヘッダーをまっすぐにし、リストをスクロールできるようにする必要があることが多い場合は、見やすくするために大量のデータがある場合に主に使用されます

<title>固定テーブルヘッダーとスクロール可能な列の効果 - スクリプトホーム</title>

if(obj.tagName.toLowerCase() == "th")
                    {
                     
                        if(objL.tagName.toLowerCase() == "th")
                        {
                            obj = objL;
                        }
                        if(obj.className == "fixed") return;
                        self.currentX = イベント.x;
                        self.currentTH = obj.childNodes[0];
                        self.currentTH.setCapture();
                    }
            }）：真実、
        onmouseup == null?
            (onmouseup = function(){
                    if(self.currentTH != null)
                    {
                        self.currentTH.releaseCapture();
                        self.currentTH = null;
                    }
            }）：真実、
        onmousemove == null?
            (onmousemove = function(){
                    if(self.currentTH != null)
                    {
                        var width = Math.round(parseInt(self.currentTH.clientWidth)event.x - self.currentX);
                        if(幅 < 0) 幅 = 0;
                        var dt = parseInt(self.currentTH.style.width) - 幅;
                        self.currentTH.style.width = 幅;
                        __resizeCell(self.currentTH.columnIndex,self.currentTH.style.width);
                        self.currentX = イベント.x;
                    }
            }）：真実、
        self.__resizeCell == null?
            (self.__resizeCell = function(idx, width){
                    var cell = document.getElementById("order_GridBody_Cells");
                    var rows = セル.childNodes;
                    変数 i = 0;
                    for (var i = 0; i < rows.length; i )
                    {
                        var cell = rows[i].childNodes[idx].childNodes[0];
                        varresetPattern = /style=[^stn] /;
                        cell.outerHTML = cell.outerHTML.toString().replace(resetPattern, "style='width:" width "'");
                    }
            }）：真実
    )
}
div.bodyContainer
{
    高さ:250ピクセル;
    幅:760ピクセル;
    オーバーフロー-x:非表示;
    オーバーフロー-y:自動;
}
div.gridCell_standard
{
    幅:100ピクセル;
    オーバーフロー:非表示;
    nw:expression(this.noWrap=true);
    マージン左: 0px;
    右マージン: 1px;
    パディング左: 2px;
    カーソル:デフォルト;
}
div.gridCell_narrow
{
    幅:30ピクセル;
    オーバーフロー:非表示;
    マージン左: 0px;
    右マージン: 1px;
    パディング左: 2px;
    nw:expression(this.noWrap=true);
    カーソル:デフォルト;
}番目  
{ 
    境界線右: #a4a6a4 1px 実線;  
    ボーダートップ: #a4a6a4 1px ソリッド;  
    境界左: #a4a6a4 1px 実線;  
    ボーダーボトム: #a4a6a4 1px ソリッド; 
    背景画像: url(images/default/headerbg.gif); 
                色:#ffffff; 
    フォントスタイル:標準; 
    フォントの太さ:標準; 
    高さ:20ピクセル; 
    カーソル:列のサイズ変更; 
    dyn 動作:式( 
        ondblclick == null? 
            (ondblclick = 関数() 
            { 
                var src = イベント.srcElement; 
                if(event.srcElement.tagName.toLowerCase()!="div") 
                { 
                    src = src.childNodes[0]; 
                } 
                src.style.width = ""; 
                __resizeCell(src.columnIndex,src.clientWidth); 
            }）：真実 
    ) 
} 
番目の固定 
{ 
    境界線右: #a4a6a4 1px 実線;  
    ボーダートップ: #a4a6a4 1px ソリッド;  
    境界左: #a4a6a4 1px 実線;  
    ボーダーボトム: #a4a6a4 1px ソリッド; 
    背景画像: url(images/default/headerbg.gif); 
                色:#ffffff; 
    フォントスタイル:標準; 
    フォントの太さ:標準; 
    高さ:20ピクセル; 
    カーソル:デフォルト; 
} 
奇数  
{ 
  境界線右: #a4a6a4 1px 実線;  
    ボーダートップ: #a4a6a4 0px ソリッド;  
    境界左: #a4a6a4 0px 実線;  
    ボーダーボトム: #a4a6a4 1px ソリッド; 
    今ラップ; 
} 
さえ  
{ 
  境界線右: #a4a6a4 1px 実線;  
    ボーダートップ: #a4a6a4 0px ソリッド;  
    境界左: #a4a6a4 0px 実線;  
    ボーダーボトム: #a4a6a4 1px ソリッド; 
} 
td.奇数_偶数 
{ 
  境界線右: #a4a6a4 1px 実線;  
    ボーダートップ: #a4a6a4 1px ソリッド;  
    境界左: #a4a6a4 1px 実線;  
    ボーダーボトム: #a4a6a4 1px ソリッド; 
    今ラップ; 
} 
td.select-cell 
{ 
  境界線右: #a4a6a4 1px 実線;  
    ボーダートップ: #a4a6a4 1px ソリッド;  
    境界左: #a4a6a4 1px 実線;  
    ボーダーボトム: #a4a6a4 1px ソリッド; 
} 
番目{ 
  色:#ff0000; 
} 
</style>

<div class="tableContainer" id="order_Container"> 
 
    <table cellpadding="0" class="display-tb2" style="margin-top: 2px;" cellspacing="0" border="0" id="order"> 
    <tr> 
    <td> 
    <table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0"> 
        <thead> 
            <th class="fixed"><div columnindex="0" class="gridCell_narrow">选择</div></th> 
            <th><div columnindex="1" class="gridCell_standard">订单编号</div></th> 
            <th><div columnindex="2" class="gridCell_standard">订货日期</div></th> 
            <th><div columnindex="3" class="gridCell_standard">订货单位</div></th> 
            <th><div columnindex="4" class="gridCell_standard">订单类别</div></th> 
            <th><div columnindex="5" class="gridCell_standard">产品类别</div></th> 
            <th><div columnindex="6" class="gridCell_standard">版本号</div></th> 
            <th><div columnindex="7" class="gridCell_standard">订货金额</div></th> 
            <th><div columnindex="8" class="gridCell_standard">订单状态</div></th> 
        </thead> 
    </table>
</td>
    </tr>
    
    <tbody>
    <tr class="odd">
    <td colspan="9">
    <div id="order_GridBody" class="bodyContainer">
    <table cellpadding="0" class="display-tb2" style="margin-top: 0px;" cellspacing="0" border="0">
    <tbody id="order_GridBody_Cells">
    <tr class="even">
    <td width="30px" class="select-cell">
         <div class="gridCell_narrow"><input type="checkbox" name="id" value="2"></div>
</td>
    <td class="odd_even"><div class="gridCell_standard">DJPH001</div></td>
    <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>
    <td class="odd_even"><div class="gridCell_standard">19</div></td>
    <td class="odd_even"><div class="gridCell_standard">直販</div></td>
    <td class="odd_even"><div class="gridCell_standard">キス</div></td>
    <td class="odd_even"><div class="gridCell_standard">5</div></td>
    <td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
    <td class="odd_even"><div class="gridCell_standard">キャンセルされました</div></td>
</tr>
    <tr class="even">
    <td width="30px" class="select-cell">
           <div class="gridCell_narrow"><input type="checkbox" name="id" value="3"></div> </td>
    <td class="odd_even"><div class="gridCell_standard">DJPH001</div></td>
    <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>
    <td class="odd_even"><div class="gridCell_standard">19</div></td>
    <td class="odd_even"><div class="gridCell_standard">売買</div></td>
    <td class="odd_even"><div class="gridCell_standard">キス</div></td>
    <td class="odd_even"><div class="gridCell_standard">5</div></td>
    <td class="odd_even"><div class="gridCell_standard">21.0000</div></td>
    <td class="odd_even"><div class="gridCell_standard"> </div></td>
</tr>
    <tr class="odd">
    <td width="30px" class="select-cell">
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="4"></div> </td>
    <td class="odd_even"><div class="gridCell_standard">DJPH889</div></td>
    <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>
    <td class="odd_even"><div class="gridCell_standard">0</div></td>
    <td class="odd_even"><div class="gridCell_standard">売買</div></td>
    <td class="odd_even"><div class="gridCell_standard">キス</div></td>
    <td class="odd_even"><div class="gridCell_standard">5</div></td>
    <td class="odd_even"><div class="gridCell_standard">21.0000</div></td>
    <td class="odd_even"><div class="gridCell_standard">キャンセルされました</div></td>
</tr>
    <tr class="even">
    <td width="30px" class="select-cell">
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="5"></div> </td>
    <td class="odd_even"><div class="gridCell_standard">DJPH889</div></td>
    <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>
    <td class="odd_even"><div class="gridCell_standard">0</div></td>
    <td class="odd_even"><div class="gridCell_standard">直販</div></td>
    <td class="odd_even"><div class="gridCell_standard">キス</div></td>
    <td class="odd_even"><div class="gridCell_standard">5</div></td>
    <td class="odd_even"><div class="gridCell_standard">1.0000</div></td>
    <td class="odd_even"><div class="gridCell_standard"> </div></td>
</tr>
    <tr class="odd">
    <td width="30px" class="select-cell">
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="6"></div> </td>
    <td class="odd_even"><div class="gridCell_standard">tytutyjh465456</div></td>
    <td class="odd_even"><div class="gridCell_standard">2005-02-02</div></td>
    <td class="odd_even"><div class="gridCell_standard">0</div></td>
    <td class="odd_even"><div class="gridCell_standard">売買</div></td>
    <td class="odd_even"><div class="gridCell_standard">キス</div></td>
    <td class="odd_even"><div class="gridCell_standard">0</div></td>
    <td class="odd_even"><div class="gridCell_standard">21.0000</div></td>
    <td class="odd_even"><div class="gridCell_standard">制作部門がレビューしました</div></td>
</tr>
    <tr class="even">
    <td width="30px" class="select-cell">
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="7"></div> </td>
    <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
    <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
    <td class="odd_even"><div class="gridCell_standard">-1</div></td>
    <td class="odd_even"><div class="gridCell_standard">配布</div></td>
    <td class="odd_even"><div class="gridCell_standard">キス</div></td>
    <td class="odd_even"><div class="gridCell_standard">10.2</div></td>
    <td class="odd_even"><div class="gridCell_standard">21.0000</div></td>
    <td class="odd_even"><div class="gridCell_standard">制作部門がレビューしました</div></td>
</tr>
    <tr class="odd">
    <td width="30px" class="select-cell">
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="8"></div> </td>
    <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
    <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
    <td class="odd_even"><div class="gridCell_standard">-1</div></td>
    <td class="odd_even"><div class="gridCell_standard">配布</div></td>
    <td class="odd_even"><div class="gridCell_standard">キス</div></td>
    <td class="odd_even"><div class="gridCell_standard">10.2</div></td>
    <td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
    <td class="odd_even"><div class="gridCell_standard">総代理店によるレビュー済み</div></td>
</tr>
    <tr class="even">
    <td width="30px" class="select-cell">
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="9"></div> </td>
    <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
    <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
    <td class="odd_even"><div class="gridCell_standard">-1</div></td>
    <td class="odd_even"><div class="gridCell_standard">配布</div></td>
    <td class="odd_even"><div class="gridCell_standard">キス</div></td>
    <td class="odd_even"><div class="gridCell_standard">10.2</div></td>
    <td class="odd_even"><div class="gridCell_standard">32.0000</div></td>
    <td class="odd_even"><div class="gridCell_standard">キャンセルされました</div></td>
</tr>
    <tr class="odd">
    <td width="30px" class="select-cell">
         <div class="gridCell_narrow"><input type="checkbox" name="id" value="10"></div> </td>
    <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
    <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
    <td class="odd_even"><div class="gridCell_standard">-1</div></td>
    <td class="odd_even"><div class="gridCell_standard">配布</div></td>
    <td class="odd_even"><div class="gridCell_standard">キス</div></td>
    <td class="odd_even"><div class="gridCell_standard">10.2</div></td>
    <td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
    <td class="odd_even"><div class="gridCell_standard"> </div></td>
</tr>
    <tr class="even">
    <td width="30px" class="select-cell">
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="11"></div> </td>
    <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
    <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
    <td class="odd_even"><div class="gridCell_standard">-1</div></td>
    <td class="odd_even"><div class="gridCell_standard">配布</div></td>
    <td class="odd_even"><div class="gridCell_standard">キス</div></td>
    <td class="odd_even"><div class="gridCell_standard">10.2</div></td>
    <td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
    <td class="odd_even"><div class="gridCell_standard"> </div></td>
</tr>
    <tr class="odd">
    <td width="30px" class="select-cell">
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="12"></div> </td>
    <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
    <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
    <td class="odd_even"><div class="gridCell_standard">-1</div></td>
    <td class="odd_even"><div class="gridCell_standard">配布</div></td>
    <td class="odd_even"><div class="gridCell_standard">キス</div></td>
    <td class="odd_even"><div class="gridCell_standard">10.2</div></td>
    <td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
    <td class="odd_even"><div class="gridCell_standard">キャンセルされました</div></td>
</tr>
    <tr class="even">
    <td width="30px" class="select-cell">
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="13"></div> </td>
    <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
    <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
    <td class="odd_even"><div class="gridCell_standard">-1</div></td>
    <td class="odd_even"><div class="gridCell_standard">配布</div></td>
    <td class="odd_even"><div class="gridCell_standard">キス</div></td>
    <td class="odd_even"><div class="gridCell_standard">10.2</div></td>
    <td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
    <td class="odd_even"><div class="gridCell_standard">キャンセルされました</div></td>
</tr>
    <tr class="odd">
    <td width="30px" class="select-cell">
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="14"></div> </td>
    <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
    <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
    <td class="odd_even"><div class="gridCell_standard">-1</div></td>
    <td class="odd_even"><div class="gridCell_standard">配布</div></td>
    <td class="odd_even"><div class="gridCell_standard">キス</div></td>
    <td class="odd_even"><div class="gridCell_standard">10.2</div></td>
    <td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
    <td class="odd_even"><div class="gridCell_standard">キャンセルされました</div></td>
</tr>
    <tr class="even">
    <td width="30px" class="select-cell">
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="15"></div> </td>
    <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
    <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
    <td class="odd_even"><div class="gridCell_standard">-1</div></td>
    <td class="odd_even"><div class="gridCell_standard">配布</div></td>
    <td class="odd_even"><div class="gridCell_standard">キス</div></td>
    <td class="odd_even"><div class="gridCell_standard">10.2</div></td>
    <td class="odd_even"><div class="gridCell_standard">21.0000</div></td>
    <td class="odd_even"><div class="gridCell_standard">キャンセルされました</div></td>
</tr>
    <tr class="odd">
    <td width="30px" class="select-cell">
          <div class="gridCell_narrow"><input type="checkbox" name="id" value="16"></div> </td>
    <td class="odd_even"><div class="gridCell_standard">KDSZ2005050698</div></td>
    <td class="odd_even"><div class="gridCell_standard">2005-05-05</div></td>
    <td class="odd_even"><div class="gridCell_standard">-1</div></td>
    <td class="odd_even"><div class="gridCell_standard">配布</div></td>
    <td class="odd_even"><div class="gridCell_standard">キス</div></td>
    <td class="odd_even"><div class="gridCell_standard">10.2</div></td>
    <td class="odd_even"><div class="gridCell_standard">12.0000</div></td>
    <td class="odd_even"><div class="gridCell_standard">キャンセルされました</div></td>
</tr>
     
    </tbody>
    </table>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    <div style="height:15px"></div>
</div>

[Ctrl A すべて選択注: 外部 Js を導入する必要がある場合は、を実行するために更新する必要があります]

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Jingyun JS ランダム並べ替えプログラムは情報をランダムに表示します - ニュースの表示順序は毎回異なります_JavaScript スキル次の記事：Jingyun JS ランダム並べ替えプログラムは情報をランダムに表示します - ニュースの表示順序は毎回異なります_JavaScript スキル

続きを見る

固定テーブルヘッダーとスクロール可能な列の効果_JavaScript スキル

関連記事