Freeze table

最新推荐文章于 2024-06-26 09:43:05 发布
最新推荐文章于 2024-06-26 09:43:05 发布
阅读量1.5k 收藏
点赞数
分类专栏： HTML + CSS Script 文章标签： table border class cordova scroll function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FBug/article/details/7684735
版权 
羡慕
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>= Freeze = Table</title>
<style type="text/css">
div.freeze
{
    border:solid 1px;
    width:800px;
    overflow:hidden;
}

div.horizontal
{
    overflow-x:hidden;
    overflow-y:scroll;
    height:90px;
}

div.freeze table.schema
{
}

div.freeze table.schema table.freeze
{
}

div.freeze table.schema table.data
{
    position:relative;
}


div.freeze table.schema td.col
{
    padding:1px 0px 1px 1px;
    position:relative;
    vertical-align:top;
    overflow:hidden;
}
div.freeze table.schema td.left
{
}
div.freeze table.schema td.right
{
}

div.freeze table.schema td.col thead
{
}
div.freeze table.schema td.col thead tr
{
}



div.freeze table.scroll
{
    width:100%;
}
div.freeze table.scroll td.col
{
    text-indent:6px;
    line-height:14px;
    font-size:14px;
    border:solid 1px #aaaaaa;
    width:21px;
    height:21px;
    cursor:pointer;
}
div.freeze table.scroll td.scroll
{
    position:relative;
    border:solid 1px #aaaaaa;
    background-color:#eeeeee;
    vertical-align:top;
}
div.freeze table.scroll div.scroll
{
    position:absolute;
    width:18px;
    height:20px;
    border:solid 1px #333333;
    background-color:#999999;
    cursor:w-resize;
}


</style>
<script type="text/javascript" language="javascript">
var IsIE = (navigator.appName=="Microsoft Internet Explorer");
var GetEvent = IsIE ? function(base) { return window.event; } : function(base) { return (base.length > 0 && (base[0].constructor == Event || base[0].constructor == MouseEvent)) ? base[0] : null; };
var GetEventElement = function(base) { var ev = GetEvent(base); if (ev == null) return null; return IsIE ? ev.srcElement : ev.target; };

function moveTo(navi, arg) {
    var event = GetEvent(arg);
    var table = document.getElementById("tdData");
    //var width = parseInt(table.clientWidth) - parseInt(table.parentNode.offsetLeft);
    var width = parseInt(navi.clientWidth) + 40;
    var left = parseInt(width * (event.x || event.layerX) / navi.clientWidth);
    if (left < 20) left = 0;
    if (width - left < 20) left = width;
    table.style.left = (0-left) + "px";
}
</script>
</head>

<body>

<div class="freeze">

<div class="--horizontal">
<table class="schema" cellpadding="0" cellspacing="0" border="0">
<tr><td class="col left">
    <table class="freeze" id="tbFreeze" cellpadding="0" cellspacing="0" border="1" rules="all" width="350px;">
        <thead>
            <tr>
                <th style="width:50px;">ID</th>
                <th style="width:300px;">Name</th>
            </tr>
        </thead>
        <tr>
            <td>1</td>
            <td>CYBERGUYS/EFILLIATE</td>
        </tr>
        <tr>
            <td>2</td>
            <td>EXECUTIVE OFFICE FURNITURE</td>
        </tr>
        <tr>
            <td>3</td>
            <td>GLOBAL EQUIPMENT COMPANY</td>
        </tr>
        <tr>
            <td>4</td>
            <td>KENNY PRODUCTS, INC.</td>
        </tr>
        <tr>
            <td>5</td>
            <td>PREMIER ELECTION SOLUTIONS</td>
        </tr>
    </table>
</td>
<td class="col right">
    <table class="data" id="tdData" cellpadding="0" cellspacing="0" border="1" rules="all" width="900px;">
        <thead>
            <tr>
                <th style="width:450px;">Description</th>
                <th style="width:450px;">Description</th>
            </tr>
        </thead>
        <tr>
            <td>1321 White Rock Road, Rancho Cordova, CA 95742-6505</td>
            <td>1321 White Rock Road, Rancho Cordova, CA 95742-6505</td>
        </tr>
        <tr>
            <td>241 East Hamilton St, Tallahassee, FL 32301</td>
            <td>241 East Hamilton St, Tallahassee, FL 32301</td>
        </tr>
        <tr>
            <td>"2505 Mill Center Parkway, Suite 100, Buford, GA 30518"</td>
            <td>"2505 Mill Center Parkway, Suite 100, Buford, GA 30518"</td>
        </tr>
        <tr>
            <td>13309 S. Normandie Avenue, Gardena, CA 90249</td>
            <td>13309 S. Normandie Avenue, Gardena, CA 90249</td>
        </tr>
        <tr>
            <td>1253 Allen Station Parkway, Allen, TX 75002</td>
            <td>1253 Allen Station Parkway, Allen, TX 75002</td>
        </tr>
    </table>
</td></tr>
</table>
</div>

<table class="scroll" cellpadding="0" cellspacing="0" border="0" rules="none">
    <tr>
        <td style="width:350px;">1,2,3</td>
        <td class="col"><</td>
        <td class="scroll" οnclick="moveTo(this, arguments);"><div class="scroll"></div></td>
        <td class="col">></td>
    </tr>
</table>

</div>
</body>
</html>

FBugFramework
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
TableFreeze.js（基于JQuery的表格冻结插件）
12-08
// rowHead, rowFoot, colLeft, colRight 分别对应需要冻结的表格首行，尾行，首列和尾列 var rowHead = 1, rowFoot = 1, colLeft = 2, colRight = 2; $("#someId").FrozenTable(rowHead, rowFoot, colLeft, colRight);
freezetable.js
08-09
这个文件是自己写的冻结表头工具类，默认冻结表头，可以设置冻结几列，结合我写的文档，可以很好的满足大家的需求
掌握响应式冻结表格：jQuery-Freeze-Table 框架深度解析与应用指南
最新发布
gitblog_00081的博客
06-26 238
掌握响应式冻结表格：jQuery-Freeze-Table 框架深度解析与应用指南 项目地址:https://gitcode.com/yidas/jquery-freeze-table 在网页开发中，当处理大型数据表时，保持头部和列的固定是一项挑战，特别是在响应式设计中。为此，我们有幸介绍一个强大的开源项目——jQuery-Freeze-Table，它允许你轻松创建适应各种屏幕尺寸的冻结表格，且具...
jquery-freeze-table：带有冻结头和jQuery列的RWD表
02-03
RWD冻结表 带有冻结头和jQuery列的RWD表 产品特点 使用RWD冻结大型表的标题行和列 可选功能，例如冻结滚动条 命名空间支持多个表 大纲 示范 要求 该库要求以下内容： jQuery 1.11.0+ | 2.0+ | 3.0+ 安装 凉亭安装 bower install jquery-freeze-table 您也可以通过NPM下载或直接复制资产。 资产包括 将JavaScript文件添加到<head>或<body>的底部 < script type =" text/javascript " src =" dist/js/freeze-table.js " > </ script
TableFreeze冻结列.rar
05-14
项目中需要用到自己动态写table拼接的，前几列冻结，头冻结，底部冻结的，适合使用本案例。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
freezetablewidget.rar_Table
09-20
在Linux系统中，Freeze Table Widget 是一个专为界面交互设计的组件，它允许用户在处理大型数据集时，能够冻结表格的特定列或行，以便于查看和操作。这个功能在数据分析、报表展示或者任何需要滚动查看大量表格数据...
freeze-table.rar
06-21
"freeze-table.rar"这个压缩包文件，从其标题和描述来看，显然与创建具有固定表头和列的表格有关，这是一种提高用户在浏览大数据量时交互体验的技术。这种技术允许用户在滚动页面时，始终保持表头和某些列可见，方便...
table的行列冻结
01-03
为了简化开发过程，许多库和框架提供了行列冻结的功能，如jQuery的`fixedHeaderTable`插件，或者Bootstrap的`freeze-pane`扩展。这些工具通常会提供更完善的解决方案，包括响应式设计和更好的性能优化。 ### 四、...
冻结table的行和列
03-24
压缩包子文件的文件名称列表中有"冻结行和列.html"和"freeze 第一列.html"，这可能分别代表了一个示例网页，展示了如何冻结整个表格的行和仅冻结第一列的示例。通过分析这些HTML文件，我们可以学习到如何使用CSS和...
flexible-freeze:灵活的冻结脚本，用于管理非工作时间的PostgreSQL数据库清理和冻结
05-10
柔性冷冻 灵活的冻结脚本，用于管理非工作时间的PostgreSQL数据库清理和冻结。 /scripts/flexible_freeze.py 该脚本旨在用于在已知的慢流量期间在数据库上... [--exclude-table-in-database EXCLUDE_TABLE_IN_DATABASE
freezeTable.rar
07-21
jquery实现冻结单表头，内容如果很多，可以纵向滚动的效果。滚动条在谷歌浏览器下做了美化，IE和火狐不支持滚动条的美化。但是效果没问题。
htmlTableFreeze:这是一个用于冻结 html 表的 js 基础 jquery，只是 excel.it 刚刚开始
06-17
htmlTableFreeze 这是一个用于冻结 html 表的 js 基础 jquery，只是 excel.it 刚刚开始。
table横向纵向表头冻结js代码
04-10
NULL 博文链接：https://yixinhu.iteye.com/blog/1668843
Jquery Table 固定行和列
05-03
Jquery Table 固定行和列,有需要的朋友拿去
jQuery插件冻结行列、固定列固定行，html、table实现
06-05
2. 引入插件文件：将下载的"jQuery-Plugin-To-Freeze-Table-Columns-Rows-On-Scroll"解压后，引入相应的JS文件，通常是`jquery.freeze-table.js`。 3. 配置表格结构：确保你的HTML表格具有正确的结构，包括表头...
Freeze Table Header and Columns
AIRFLYNET的专栏
07-05 2262
IntroductionI was developing a web based application that needed a datagrid/table that can freeze its header and columns, and also have a complex that consists of merged cells. I have searched on th
js table 表格冻结
IT爱好者-程序员
02-15 722
可以实现 html table 的 上+下+左+右 4个方向的冻结功能。
<?php namespace App\Models; use Illuminate\Database\Eloquent\Model; use Illuminate\Support\Facades\DB; class WebModel extends Model { /** * Create a new Eloquent model instance. * * @param array $attributes */ public function __construct() { $this->setTable('pms_web'); parent::__construct(); } const STATUS_NORMAL = 1; //正常 const STATUS_FREEZE = 2; //冻结 public static function Enum($sign = "") { $status = [ 'status' => [ self::STATUS_NORMAL, self::STATUS_FREEZE ] ]; return isset($status[$sign]) ? $status[$sign] : $status; } public function WebDb() { return DB::table($this->getTable(),'w'); } public function FindOne($content, $param = "id") { $result = $this->WebDb()->where($param, $content)->select(DB::raw('id'))->first(); if (empty($result)) { return ''; } return $this->FormatOne($result); } public function FindList($params) { $query = $this->WebDb(); $query->select( DB::raw('SQL_CALC_FOUND_ROWS id') ); $query->limit($params['per_page']); $query->offset($params['offset']); $query->orderByDesc('w.id'); $result = $query->get(); $return_result = array( 'total' => 0, 'data' => [], ); if (empty($result)) { return $return_result; } $fromat_result = $this->FormatList($result); $total = DB::select("select FOUND_ROWS() as num")[0]->num; return [ 'total' => $total, 'data' => $fromat_result, ]; } public function FormatList(&$result) { foreach ($result as $v) { $this->FormatOne($v); } return $result; } public function FormatOne(&$result) { return $result; } public function simpleSave($data, $where = []) { } }
06-09
该类继承自 `Illuminate\Database\Eloquent\Model` 类，用于处理 `pms_web` 表的数据操作。这个 Model 类中定义了一些静态常量和方法，用于返回状态码、查询数据等。在 `FindOne` 方法中，使用 `$this->WebDb()` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值