javascript - 在html中将滚动条添加到表体-6ren

javascript - 在html中将滚动条添加到表体

转载作者：行者123 更新时间：2023-11-30 11:44:35

我想知道如何将滚动条仅添加到table body，而不是添加到table 头。在下面的示例和这个 Plunker 中，当添加滚动条时，它们控制 table head 和 table body。我想要 header 和 body 的水平滚动条，但垂直滚动条只到 body。

html

<html>
<head>
<script src="angular.min.js"></script>

<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
<link rel="stylesheet" href="font-awesome.min.css"/>
<link rel="stylesheet" href="bootstrap.min.css" />
</head>
<body data-ng-app="testApp" data-ng-controller="treeTable">
<div  class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-9">
    <div class="tableheight ">
  <table class="treetable-nested childtable">
    <thead>
      <tr>
        <!-- <th >
          <input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
        </th> -->
        <th class="cell-members">
         <input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" /> Name
        </th>
        <th class="cell-members">
          Version
        </th>
        <th class="cell-members">
          Size
        </th>
        <th class="cell-members">
        Modified By
        </th>
        <th class="cell-members">
        Labels
        </th>
        <th class="cell-members">
        Description
        </th>
      </tr>
    </thead>
    <tbody class="newRepo" style="font-size:12px" data-ng-class="{opened: item.opened}" data-ng-include="&#39;table_tree.html&#39;" data-ng-repeat="item in list"></tbody>
  </table>
    </div>
  <script id="table_tree.html" type="text/ng-template">
    <tr ng-class="{parent: item.children}" ng-init="parentScope = $parent.$parent; initCheckbox(item, parentScope.item)">

      <td class="cell-name top-border" ng-if="level &amp;&amp; level &gt; 1">
      <span style="padding-left: 30px" >&nbsp;  <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
        {{item.name}} </span>
      </td>
<td class="cell-name top-border" ng-if=" &#40;&#33;level &amp;&amp; level &lt;&#61; 1 &#41; &#124;&#124 &#40;level &amp;&amp; level &lt;&#61; 1&#41;">
        <span style="padding-left:11px" ng-click="item.opened = !item.opened"></span>&nbsp;<input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
        {{item.name}}
      </td>

<td class="cell-name top-border" ng-if="&#33;level">
       <span class="indent" ng-click="item.opened = !item.opened">&nbsp;<input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
        {{item.name}} </span>
      </td>

      <td class="cell-name">
        {{item.Version}} 
      </td>
      <td class="cell-name">
        {{item.Size}}
      </td>
      <td class="cell-name">
        {{item.ModifiedBy}}
      </td>
    <td class="cell-name">
        {{item.Labels}}
      </td>
<td class="cell-name">
        {{item.Description}}
      </td>
    </tr>
    <tr class="children" ng-if="item.children &amp;&amp; item.children.length &gt; 0">
      <td colspan="6">
        <table class="childtable">
          <tbody style="font-size:12px" ng-class="{opened: item.opened}" ng-include="&#39;table_tree.html&#39;" ng-init="level = level + 1" ng-repeat="item in item.children"></tbody>
        </table>
      </td>
    </tr>
  </script>
</div>
</div>
</div>
</div>
</body>
</html>

最佳答案

Plunker

HTML

<html>

<head>
  <script src="angular.min.js"></script>
  <script src="jquery.js"></script>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css" />
  <!-- <link rel="stylesheet" href="font-awesome.min.css" /> -->
  <link rel="stylesheet" href="bootstrap.min.css" />
</head>

<body data-ng-app="testApp" data-ng-controller="treeTable">
  <div class="container-fluid">
    <div class="main-wrapper">
      <div class="table-outer-wrapper">
        <table class="treetable-nested childtable">
          <thead>
            <tr>
              <!-- <th >
          <input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" />
        </th> -->
              <th class="cell-members">
                <div>
                  <input data-ng-checked="(list | selected).length == list.length" data-ng-click="toggleAllCheckboxes($event)" type="checkbox" /> Name
                </div>
              </th>
              <th class="cell-members">
                <div>
                  Version
                </div>
              </th>
              <th class="cell-members">
                <div>
                  Size
                </div>
              </th>
              <th class="cell-members">
                <div>
                  Modified By
                </div>
              </th>
              <th class="cell-members">
                <div>
                  Labels
                </div>
              </th>
              <th class="cell-members">
                <div>
                  Description
                </div>
              </th>
            </tr>
          </thead>
          <tbody class="newRepo" style="font-size:12px" data-ng-class="{opened: item.opened}" data-ng-include="&#39;table_tree.html&#39;" data-ng-repeat="item in list"></tbody>
        </table>
      </div>
    </div>
  </div>
  <script id="table_tree.html" type="text/ng-template">
    <tr ng-class="{parent: item.children}" ng-init="parentScope = $parent.$parent; initCheckbox(item, parentScope.item)">
      <td class="cell-name top-border" ng-if="level &amp;&amp; level &gt; 1">
        <span style="padding-left: 30px">&nbsp;  <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
        {{item.name}} </span>
      </td>
      <td class="cell-name top-border" ng-if=" &#40;&#33;level &amp;&amp; level &lt;&#61; 1 &#41; &#124;&#124 &#40;level &amp;&amp; level &lt;&#61; 1&#41;">
        <span style="padding-left:11px" ng-click="item.opened = !item.opened"></span>&nbsp;
        <input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" /> {{item.name}}
      </td>
      <td class="cell-name top-border" ng-if="&#33;level">
        <span class="indent" ng-click="item.opened = !item.opened">&nbsp;<input ng-change="toggleCheckbox(item, parentScope)" ng-model="item.selected" type="checkbox" />
        {{item.name}} </span>
      </td>
      <td class="cell-name">
        {{item.Version}}
      </td>
      <td class="cell-name">
        {{item.Size}}
      </td>
      <td class="cell-name">
        {{item.ModifiedBy}}
      </td>
      <td class="cell-name">
        {{item.Labels}}
      </td>
      <td class="cell-name">
        {{item.Description}}
      </td>
    </tr>
    <tr class="children" ng-if="item.children &amp;&amp; item.children.length &gt; 0">
      <td colspan="6">
        <table class="childtable">
          <tbody style="font-size:12px" ng-class="{opened: item.opened}" ng-include="&#39;table_tree.html&#39;" ng-init="level = level + 1" ng-repeat="item in item.children"></tbody>
        </table>
      </td>
    </tr>
  </script>
</body>

</html>

CSS

@charset "UTF-8";
.childtable {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

.treetable-nested {
    background: #fff;
    text-align: left;
    width: 100%;
}

.treetable-nested th .treetable-nested td {
    padding: 0;
}

.treetable-nested td {
    background: #F9F9F9;
}

.treetable-nested td + td {
    padding-left: 5px;
}

.treetable-nested td {
    border-top: 1px solid #fff;
}

.treetable-nested td[colspan] {
    border: none;
}

.treetable-nested .cell-input {
    width: 20px;
    border-right: 1px solid;
}

.treetable-nested .cell-members {
    width: 10%;
}

.treetable-nested .indent {}

.treetable-nested .parent > .cell-name {
    cursor: pointer;
}

.treetable-nested .cell-name {}

.treetable-nested .parent > .cell-name > .indent:before {
    font-family: FontAwesome;
    content: "\f054";
    display: inline-block;
    font-size: 12px;
    -moz-transition: -moz-transform 0.3s;
    -o-transition: -o-transform 0.3s;
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.treetable-nested .children {
    display: none;
}

.treetable-nested .opened > tr > .cell-name > .indent:before {
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.treetable-nested .opened > .children {
    display: table-row;
}




.main-wrapper {
    position: relative;
    padding-top: 37px;
}

.table-outer-wrapper {
    height: 150px;
    overflow:auto;
}

.table-outer-wrapper table {
    min-width: 800px;
}
.table-head {
    height: 37px;
}
.table-head > div {
    font-size: 16px;
    font-weight: bold;
    float: left;
    padding: 9px 0px;
}
.table-head-wrapper {
    overflow: hidden;
}

(function () {
    var app, list;
    list = [
        {
            name: 'Repo 1',
            opened: true,
            Version:'Current Version',
            Size:'Repo Size',
            ModifiedBy:'sashi',
            Labels:'repo1',
            Description:'',
            children: [
                {
                    name: 'Bundle 1',
                    opened: true,
                    Version:'Current Version',
                    Size:'Repo Size',
                    ModifiedBy:'sashi',
                    Labels:'repo1',
                    Description:'',
                    children: [
                        {
                            name: 'Comp 1',
                            title: 'Leader',
                            Version:'Current Version',
                                Size:'Repo Size',
                                    ModifiedBy:'sashi',
                                    Labels:'repo1',
                                    Description:''
                        },
                        {
                            name: 'Comp 2',
                            title: 'Senior F2E',
                            Version:'Current Version',
                                Size:'Repo Size',
                                    ModifiedBy:'sashi',
                                    Labels:'repo1',
                                    Description:''
                        },
                        {
                            name: 'Comp 3',
                            title: 'Junior F2E',
                            Version:'Current Version',
                            Size:'Repo Size',
                                ModifiedBy:'sashi',
                                Labels:'repo1',
                                Description:''
                        }
                    ]
                },
                {
                    name: 'Bundle 2',
                    opened: true,
                    Version:'Current Version',
                    Size:'Repo Size',
                    ModifiedBy:'sashi',
                    Labels:'repo1',
                    Description:'',
                    children: [
                        {
                            name: 'Comp 1',
                            title: 'Leader',
                            Version:'Current Version',
                            Size:'Repo Size',
                            ModifiedBy:'sashi',
                            Labels:'repo1',
                            Description:''
                        },
                        {
                            name: 'Comp 2',
                            title: 'Intern',
                            Version:'Current Version',
                            Size:'Repo Size',
                            ModifiedBy:'sashi',
                            Labels:'repo1',
                            Description:''
                        }
                    ]
                },
                {
                    name: 'Bundle 3',
                    opened: true,
                    Version:'Current Version',
                    Size:'Repo Size',
                    ModifiedBy:'sashi',
                    Labels:'repo1',
                    Description:'',
                    children: [
                        {
                            name: 'Comp 1',
                            title: 'Leader',
                            Version:'Current Version',
                            Size:'Repo Size',
                            ModifiedBy:'sashi',
                            Labels:'repo1',
                            Description:''
                        },
                        {
                            name: 'Comp 2',
                            title: 'Intern',
                            Version:'Current Version',
                            Size:'Repo Size',
                            ModifiedBy:'sashi',
                            Labels:'repo1',
                            Description:''
                        }
                    ]
                }
            ]
        },
        {
            name: 'Repo 2',
            Version:'Current Version',
            Size:'Repo Size',
            ModifiedBy:'sashi',
            Labels:'repo1',
            Description:'',
            children: [{
                    name: 'Bundle 1',
                    title: 'Designer',
                    Version:'Current Version',
                    Size:'Repo Size',
                    ModifiedBy:'sashi',
                    Labels:'repo1',
                    Description:''
                }]
        },
        {
            name: 'Repo 3',
            Version:'Current Version',
            Size:'Repo Size',
            ModifiedBy:'sashi',
            Labels:'repo1',
            Description:'',
            children: [{
                    name: 'Bundle 1',
                    title: 'Robot',
                    Version:'Current Version',
                    Size:'Repo Size',
                    ModifiedBy:'sashi',
                    Labels:'repo1',
                    Description:'',
                }]
        }
    ];
    app = angular.module('testApp', []).controller('treeTable', [
        '$scope',
        '$filter',
        function ($scope, $filter) {
            $scope.list = list;

            $scope.save = function() {
                $scope.repoList = [];
                $scope.bundleList = [];
                $scope.componentList = [];
                $scope.selectedItems = [];

                function checkChildren(c) {
                    angular.forEach(c.children, function (c) {
                        if(c.selected) {
                            $scope.bundleList.push(c.name);
                            $scope.selectedItems.push(c.name);
                        }
                        checkComponents (c);
                    });
                }
                function checkComponents(c) {
                    angular.forEach(c.children, function (c) {
                       if (c.selected){
                          $scope.componentList.push(c.name);
                          $scope.selectedItems.push(c.name);
                       }
                    //    checkChildren(c);
                    });
               }

                angular.forEach($scope.list, function(value, key) {
                    alert(value.name);
                    if(value.selected) {
                        $scope.repoList.push(value.name);
                    }
                    checkChildren(value);
               });
                console.log($scope.repoList);
                console.log($scope.bundleList);
                console.log($scope.componentList);
                console.log($scope.selectedItems);
            };
            $scope.toggleAllCheckboxes = function ($event) {
                var i, item, len, ref, results, selected;
                selected = $event.target.checked;
                //alert(selected);
                ref = $scope.list;
                results = [];
                for (i = 0, len = ref.length; i < len; i++) {
                    /*if (window.CP.shouldStopExecution(1)) {
                        break;
                    }*/
                    item = ref[i];
                    item.selected = selected;
                    if (item.children != null) {
                        results.push($scope.$broadcast('changeChildren', item));
                    } else {
                        results.push(void 0);
                    }
                    //console.log();
                }
                //window.CP.exitedLoop(1);
                return results;
            };
            $scope.initCheckbox = function (item, parentItem) {
                //alert(parentItem.selected);
                return item.selected = parentItem && parentItem.selected || item.selected || false;
            };
            $scope.toggleCheckbox = function (item, parentScope) {
                if (item.children != null) {
                    $scope.$broadcast('changeChildren', item);
                }
                if (parentScope.item != null) {
                    return $scope.$emit('changeParent', parentScope);
                }
            };
            $scope.$on('changeChildren', function (event, parentItem) {
                var child, i, len, ref, results;
                ref = parentItem.children;
                results = [];
                for (i = 0, len = ref.length; i < len; i++) {
                    /*if (window.CP.shouldStopExecution(2)) {
                        break;
                    }*/
                    child = ref[i];
                    child.selected = parentItem.selected;
                    if (child.children != null) {
                        results.push($scope.$broadcast('changeChildren', child));
                    } else {
                        results.push(void 0);
                    }
                }
               // window.CP.exitedLoop(2);
                return results;
            });
            return $scope.$on('changeParent', function (event, parentScope) {
                var children;
                children = parentScope.item.children;
                parentScope.item.selected = $filter('selected')(children).length === children.length;
                parentScope = parentScope.$parent.$parent;
                if (parentScope.item != null) {
                    return $scope.$broadcast('changeParent', parentScope);
                }
            });
        }
    ]);
    app.filter('selected', [
        '$filter',
        function ($filter) {
            return function (files) {
                return $filter('filter')(files, { selected: true });
            };
        }
    ]);
}.call(this));


function resize_table() {
    var reference_td, head_padding;
    var scrollbar_width = $('.table-outer-wrapper')[0].offsetHeight - $('.table-outer-wrapper')[0].clientHeight;

    $('.table-head').width($('.table-outer-wrapper table').width());


    $('.table-head-wrapper').width($('.table-outer-wrapper').width() - scrollbar_width);
    $('.table-head > div').each(function(i,e){
        reference_td = $('.table-outer-wrapper table tr td:nth-child(' + (i +1)+ ')');
        head_padding = parseInt($(e).css('padding-left'), 10);
        console.log(head_padding);
        $(e).width(reference_td.outerWidth() - (head_padding*2));
    })

}

function scroll_table(){
    var sx = $('.table-outer-wrapper').scrollLeft();
    $('.table-head').css('transform', 'translateX(-' + sx + 'px)');
}


$(document).ready(function(){
    $('.main-wrapper').prepend('<div class="table-head-wrapper"><div class="table-head"></div></div>');

    $('.cell-members > div').each(function(i,e){
        $(e).appendTo('.table-head');
    });

    resize_table();

    $(window).resize(function(){
        resize_table();
    });

    $('.table-outer-wrapper').scroll(function() {
        scroll_table();
    });

})

关于javascript - 在html中将滚动条添加到表体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41447468/

文章推荐： javascript - AngularJS ui-grid enableCellEdit 不编辑

文章推荐： java - Java 光标周围的黄色圆圈

文章推荐： ios - 无法过滤使用字典数组创建的 TableView

mysql - 同步/流式传输 MySQL 表/表(连接表)与 PostgreSQL 表/表
我有一台 MySQL 服务器和一台 PostgreSQL 服务器。需要从多个表中复制或重新插入一组数据 MySQL 流式传输/同步到 PostgreSQL 表。这种复制可以基于时间(Sync)或事
php - 从用户(表)获取数据其中用户(表)的id等于 friend (表)的id
如果两个表的 id 彼此相等，我尝试从一个表中获取数据。这是我使用的代码: SELECT id_to , email_to , name_to , status_to
sql - Excel 表 SQL 表
我有一个 Excel 工作表。顶行对应于列名称，而连续的行每行代表一个条目。如何将此 Excel 工作表转换为 SQL 表？我使用的是 SQL Server 2005。最佳答案这取决于您使用哪
mysql - 如何将两个django模型(表)合并为一个模型(表)
我想合并两个 Django 模型并创建一个模型。让我们假设我有第一个表表 A，其中包含一些列和数据。 Table A -------------- col1 col2 col3 col
mysql - 表 1、表 2 的多列左连接
我有两个表:table1，table2，如下所示 table1: id name 1 tamil 2 english 3 maths 4 science table2: p
sql - 大传感器数据最佳选择。表 SQL 与 Azure 表
关闭。此题需要details or clarity 。目前不接受答案。想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 1 年前。 Improve th
dynamics-ax-2009 - 表=表与表.数据(表)
下面两个语句有什么区别？ newTable = orginalTable 或 newTable.data(originalTable) 我怀疑 .data() 方法具有性能优势，因为它在标准 AX 中
SQL Server 表 -(或可能是任何 SQL 表)没有主键会影响性能吗？
我有一个表，我没有在其中显式定义主键，它并不是真正需要的功能......但是一位同事建议我添加一个列作为唯一主键以随着数据库的增长提高性能...... 谁能解释一下这是如何提高性能的？没有使用索引(
php - 将产品详细信息插入 'product' 表，并将产品图像插入 'image' 表
如何将表“产品”中的产品记录与其不同表“图像”中的图像相关联？我正在对产品 ID 使用自动增量。我觉得不可能进行关联，因为产品 ID 是自动递增的，因此在插入期间不可用! 如何插入新产品，获取产品
python - 创建一个新的 sql 表，其中的列源自另一个 sql 表
我有一个 sql 表，其中包含关键字和出现次数，如下所示(尽管出现次数并不重要): ____________ dog | 3 | ____________ rat | 7 | ____
MySQL LAST_INSERT_ID() 与 INSERT INTO 表 SELECT FROM 表
是否可以使用目标表中的LAST_INSERT_ID更新源表？ INSERT INTO `target` SELECT `a`, `b` FROM `source` 目标表有一个自动增量键id，我想将其
mysql - 查询 - 在简单的 mysql 内连接中定义(表，表)
我正在重建一个搜索查询，因为它在“我看到的”中变得多余，我想知道什么 (albums_artists, artists) ( ) does in join? is it for boosting pe
innodb - mysqldump 备份缺少所有 innodb 表，但没有 MyISAM 表
以下是我使用 mysqldump 备份数据库的开关: /usr/bin/mysqldump -u **** --password=**** --single-transaction --databas
html - 为什么 MySQL 表中的所有行都是相同的？ (MySQL 表 > HTML 表)
我试图获取 MySQL 表中的所有行并将它们放入 HTML 表中: Exam ID Status Assigned Examiner
mysql - 查询 'photos' 表，同时查询 'bookmarks' 表，以便知道添加书签的照片
如何查询名为 photos 的表中的所有记录，并知道当前用户使用单个查询将哪些结果照片添加为书签？这是我的表格: -- -- Table structure for table `photos` -
Mysql MEMORY 表 vs InnoDB 表(很多插入，很少读取)
我的网站都在 InnoDB 表上运行，目前为止运行良好。现在我想知道在我的网站上实时发生了什么，所以我将每个页面浏览量(页面、引荐来源网址、IP、主机名等)存储在 InnoDB 表中。每秒大约有 10
mysql - 如何在 mysql 中存储客户数据(2 表 vs 1 表)
我在想我会为 mysql 准备两个表。一个用于存储登录信息，另一个用于存储送货地址。这是传统方式还是所有内容都存储在一张表中？对于两个表...有没有办法自动将表 A 的列复制到表 B，以便我可以引用
mysql - 表 1 包含名字和姓氏，表 2 包含两列引用表 1 上的名称
我不是程序员，我从这个表格中阅读了很多关于如何解决我的问题的内容，但我的搜索效果不好我有两张 table 表 1:成员 id*| name | surname -------------------
c# - 如何在 ASP.NET 中显示 "View"表(SQL 表)？
我知道如何在 ASP.NET 中显示真实表，例如 public ActionResult Index() { var s = db.StaffInfoDBSet.ToList(); r
php - INSERT INTO 表 VALUES.. 与 INSERT INTO 表 SET 错误
我正在尝试运行以下查询: "insert into visits set source = 'http://google.com' and country = 'en' and ref = '1234

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在html中将滚动条添加到表体