The effect of fixed table header and scrollable columns_javascript skills-JS Tutorial-php.cn

For those who often need to keep the header of the table straight and the list can be scrolled, it is mostly used when there is a lot of data for easy viewing

<title>The effect of fixed table header and scrollable columns - Script Home</title>

if(obj.tagName.toLowerCase() == "th")
                    {
                     
                        if(objL.tagName.toLowerCase() == "th")
                        {
                            obj = objL;
                        }
                        if(obj.className == "fixed") return;
                        self.currentX = event.x;
                        self.currentTH = obj.childNodes[0];
                        self.currentTH.setCapture();
                    }
            }):true,
        onmouseup == null?
            (onmouseup = function(){
                    if(self.currentTH != null)
                    {
                        self.currentTH.releaseCapture();
                        self.currentTH = null;
                    }
            }):true,
        onmousemove == null?
            (onmousemove = function(){
                    if(self.currentTH != null)
                    {
                        var width = Math.round(parseInt(self.currentTH.clientWidth) event.x - self.currentX);
                        if(width < 0) width = 0;
                        var dt = parseInt(self.currentTH.style.width) - width;
                        self.currentTH.style.width = width;
                        __resizeCell(self.currentTH.columnIndex,self.currentTH.style.width);
                        self.currentX = event.x;
                    }
            }):true,
        self.__resizeCell == null?
            (self.__resizeCell = function(idx, width){
                    var cells = document.getElementById("order_GridBody_Cells");
                    var rows = cells.childNodes;
                    var i = 0;
                    for (var i = 0; i < rows.length; i )
                    {
                        var cell = rows[i].childNodes[idx].childNodes[0];
                        var resetPattern = /style=[^stn] /;
                        cell.outerHTML = cell.outerHTML.toString().replace(resetPattern, "style='width:" width "'");
                    }
            }):true
    )
}
div.bodyContainer
{
    height:250px;
    width:760px;
    overflow-x:hidden;
    overflow-y:auto;
}
div.gridCell_standard
{
    width:100px;
    overflow:hidden;
    nw:expression(this.noWrap=true);
    margin-left: 0px;
    margin-right: 1px;
    padding-left: 2px;
    cursor:default;
}
div.gridCell_narrow
{
    width:30px;
    overflow:hidden;
    margin-left: 0px;
    margin-right: 1px;
    padding-left: 2px;
    nw:expression(this.noWrap=true);
    cursor:default;
}th  
{ 
    border-right: #a4a6a4 1px solid;  
    border-top: #a4a6a4 1px solid;  
    border-left: #a4a6a4 1px solid;  
    border-bottom: #a4a6a4 1px solid; 
    background-image: url(images/default/headerbg.gif); 
                color:#ffffff; 
    font-style:normal; 
    font-weight:normal; 
    height:20px; 
    cursor:col-resize; 
    dyn-behavior:expression( 
        ondblclick == null? 
            (ondblclick = function() 
            { 
                var src = event.srcElement; 
                if(event.srcElement.tagName.toLowerCase()!="div") 
                { 
                    src = src.childNodes[0]; 
                } 
                src.style.width = ""; 
                __resizeCell(src.columnIndex,src.clientWidth); 
            }):true 
    ) 
} 
th.fixed 
{ 
    border-right: #a4a6a4 1px solid;  
    border-top: #a4a6a4 1px solid;  
    border-left: #a4a6a4 1px solid;  
    border-bottom: #a4a6a4 1px solid; 
    background-image: url(images/default/headerbg.gif); 
                color:#ffffff; 
    font-style:normal; 
    font-weight:normal; 
    height:20px; 
    cursor:default; 
} 
tr.odd  
{ 
  border-right: #a4a6a4 1px solid;  
    border-top: #a4a6a4 0px solid;  
    border-left: #a4a6a4 0px solid;  
    border-bottom: #a4a6a4 1px solid; 
    noWrap; 
} 
tr.even  
{ 
  border-right: #a4a6a4 1px solid;  
    border-top: #a4a6a4 0px solid;  
    border-left: #a4a6a4 0px solid;  
    border-bottom: #a4a6a4 1px solid; 
} 
td.odd_even 
{ 
  border-right: #a4a6a4 1px solid;  
    border-top: #a4a6a4 1px solid;  
    border-left: #a4a6a4 1px solid;  
    border-bottom: #a4a6a4 1px solid; 
    noWrap; 
} 
td.select-cell 
{ 
  border-right: #a4a6a4 1px solid;  
    border-top: #a4a6a4 1px solid;  
    border-left: #a4a6a4 1px solid;  
    border-bottom: #a4a6a4 1px solid; 
} 
th{ 
  color:#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">Direct sales</div></td>
    <td class="odd_even"><div class="gridCell_standard">KIS</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">Cancelled</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">Buy and sell</div></td>
    <td class="odd_even"><div class="gridCell_standard">KIS</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">Buy and sell</div></td>
    <td class="odd_even"><div class="gridCell_standard">KIS</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">Cancelled</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">Direct sales</div></td>
    <td class="odd_even"><div class="gridCell_standard">KIS</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">Buy and sell</div></td>
    <td class="odd_even"><div class="gridCell_standard">KIS</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">The production department has reviewed it</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">Distribution</div></td>
    <td class="odd_even"><div class="gridCell_standard">KIS</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">The production department has reviewed it</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">Distribution</div></td>
    <td class="odd_even"><div class="gridCell_standard">KIS</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">Has been reviewed by the general agent</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">Distribution</div></td>
    <td class="odd_even"><div class="gridCell_standard">KIS</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">Cancelled</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">Distribution</div></td>
    <td class="odd_even"><div class="gridCell_standard">KIS</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">Distribution</div></td>
    <td class="odd_even"><div class="gridCell_standard">KIS</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">Distribution</div></td>
    <td class="odd_even"><div class="gridCell_standard">KIS</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">Cancelled</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">Distribution</div></td>
    <td class="odd_even"><div class="gridCell_standard">KIS</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">Cancelled</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">Distribution</div></td>
    <td class="odd_even"><div class="gridCell_standard">KIS</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">Cancelled</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">Distribution</div></td>
    <td class="odd_even"><div class="gridCell_standard">KIS</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">Cancelled</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">Distribution</div></td>
    <td class="odd_even"><div class="gridCell_standard">KIS</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">Cancelled</div></td>
</tr>
     
    </tbody>
    </table>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    <div style="height:15px"></div>
</div>

[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute ]