Javascript 在表格行中添加垂直滚动_Javascript_Css_Angularjs_Html Table_Vertical Scrolling

Javascript 在表格行中添加垂直滚动

javascript css angularjs

Javascript 在表格行中添加垂直滚动,javascript,css,angularjs,html-table,vertical-scrolling,Javascript,Css,Angularjs,Html Table,Vertical Scrolling,我需要的是添加垂直滚动，例如，如果高度超过200px。我尝试了一些解决方案，将包装在标记中，并添加overflow-y。。但是没有成功。我还尝试直接将垂直滚动添加到表中，但我只需要为复选框而不是整个表滚动。下面是我的代码和我尝试的内容： HTML <script type="text/ng-template" id="field_renderer.html"> <table class="table table-scroll"> <thead ng-sh

我需要的是添加垂直滚动，例如，如果高度超过200px。我尝试了一些解决方案，将

包装在

标记中，并添加overflow-y。。但是没有成功。我还尝试直接将垂直滚动添加到表中，但我只需要为复选框而不是整个表滚动

。下面是我的代码和我尝试的内容：

HTML

<script type="text/ng-template" id="field_renderer.html">
  <table class="table table-scroll">
    <thead ng-show="data.name === 'Location'">
      <td class="noBorder" colspan="2">
        <button data-ng-click="reportsvm.changeLocation(data, true)" data-ng-class="" class="btn btn-default btn-sm">
          Regions</button>
        <button data-ng-click="reportsvm.changeLocation(data, false)" data-ng-class="" class="btn btn-default btn-sm pull-right">
          State/Territory</button>
      </td>
    </thead>
    <tbody>
      <tr ng-if="data.children.length > 0 && !$parent.$parent.$parent.data">
        <td class="noBorder" colspan="2">
          <a href="javascript:;" class="btn btn-default-off btn-xs select-all" data-ng-click="reportsvm.selectAll(data)">Select All</a>
          <a href="javascript:;" class="btn btn-default-off btn-xs reset-all" data-ng-click="reportsvm.clearAll(data)">Clear All</a>
        </td>
      </tr>
      <tr ng-repeat-start="data in data.children">
        <td class="noBorder">
          <label>
            <input type="checkbox" value="{{data.name}}" ng-change="reportsvm.changeValue(data, $parent.$parent.$parent)" ng-model="data.isSelected">
            <span class="clickable">{{data.name}}</span>
          </label>
        </td>
        <td class="noBorder clickable">
          <span ng-if="data.children.length > 0">
            <i data-ng-click="reportsvm.showChildDetails(data, $parent.$parent.$parent)" ng-class="{'glyphicon glyphicon-chevron-right': !data.showDetails, 'glyphicon glyphicon-chevron-down': data.showDetails}"></i>
          </span>
        </td>
      </tr>
      <tr ng-repeat-end ng-if="data.showDetails">
        <td class="noBorder" ng-include="'field_renderer.html'"></td>
      </tr>
    </tbody>
  </table>
</script>
<div class="panel-group">
  <div class="panel panel-default">
    <div ng-repeat-start="data in reportsvm.modifiedFilters" class="panel panel-default">
      <div class="panel-heading clickable" data-ng-click="reportsvm.showDetails(data)">
        <h4 class="panel-title">
          <a href="">{{data.name}}</a>
          <i ng-class="{'pull-right glyphicon glyphicon-plus': !data.showDetails, 'pull-right glyphicon glyphicon-minus': data.showDetails}"></i>
         </h4>
      </div>
    </div>
    <div class="panel-body small" ng-if="data.showDetails" ng-repeat-end ng-include="'field_renderer.html'"></div>
  </div>

结果

因此，我只想在选择All/Clear All按钮后滚动，而不是全身

数据

[{
  "name": "Location",
  "showRegions": true,
  "children": [{
    "isSelected": true,
    "name": "New Jersey",
    "category": "NERO"
  }, {
    "isSelected": true,
    "name": "Pennsylvania",
    "category": "MARO"
  }, {
    "isSelected": true,
    "name": "Connecticut",
    "category": "NERO"
  }, {
    "isSelected": true,
    "name": "Delaware",
    "category": "MARO"
  }]
}, {
  "name": "Review Status",
  "children": [{
    "isSelected": true,
    "name": "Planned",
    "children": []
  }, {
    "isSelected": true,
    "name": "Pre-Review",
    "children": []
  }, {
    "isSelected": true,
    "name": "Field Work Conducted",
    "children": []
  }]
}]

PLUNKER

将复选框包装在不同的行中，为其指定

高度和溢出可能不起作用
如果您将所有复选框包装在一个容器元素中并将其指定给它，那将是一件非常棒的事情
我在这里创建了一个简单的代码笔链接

HTML:
在不同的行中包装复选框，为其指定高度
和溢出
，可能不起作用
如果您将所有复选框包装在一个容器元素中并将其指定给它，那将是一件非常棒的事情
我在这里创建了一个简单的代码笔链接

HTML:
我只想在选择All/Clear All按钮后滚动，而不是全身
在这种情况下，将selectAll/Clear按钮移动到
上方的
行：

区域
州/地区
{{data.name}

这个
我只想在选择All/Clear All按钮后滚动，而不是全身
在这种情况下，将selectAll/Clear按钮移动到
上方的
行：

区域
州/地区
{{data.name}

.
为什么在
标记中有一个表？请添加一些静态数据。调试会很有帮助。@Anonymous我刚刚添加了数据。@KevinKloet我在没有表格的行中放置数据时遇到了一些问题，所以我需要这个…我知道您需要一个表格，但我的问题是：为什么它在
标记中？为什么在
标记中有一个表格？请您添加一些静态数据。调试会很有帮助。@Anonymous我刚刚添加了数据。@KevinKloet我在没有表格的行中放置数据时遇到了一些问题，所以我需要这个…我知道你需要一个表格，但我的问题是：为什么它在标记中？嗯…你能看看plunker吗？因为我在标签中包装了复选框，但它不起作用。。。嗨，我是用静态的方式做的。请根据需要使用它。基本上，结构是tr>td>div>yourcheckbox-Hm。。我又像你一样更新了我的plunker，但又错了。。。我可能做错了什么……你不应该重复你的td。tr>td>div，它们将保持不变。所有内容，例如，重复块将位于div包装器内。希望对你有帮助。嗯……你能看看普朗克吗？因为我在标签中包装了复选框，但它不起作用。。。嗨，我是用静态的方式做的。请根据需要使用它。基本上，结构是tr>td>div>yourcheckbox-Hm。。我又像你一样更新了我的plunker，但又错了。。。我可能做错了什么……你不应该重复你的td。tr>td>div，它们将保持不变。所有内容，例如，重复块将位于div包装器内。希望能帮助你。
[{
  "name": "Location",
  "showRegions": true,
  "children": [{
    "isSelected": true,
    "name": "New Jersey",
    "category": "NERO"
  }, {
    "isSelected": true,
    "name": "Pennsylvania",
    "category": "MARO"
  }, {
    "isSelected": true,
    "name": "Connecticut",
    "category": "NERO"
  }, {
    "isSelected": true,
    "name": "Delaware",
    "category": "MARO"
  }]
}, {
  "name": "Review Status",
  "children": [{
    "isSelected": true,
    "name": "Planned",
    "children": []
  }, {
    "isSelected": true,
    "name": "Pre-Review",
    "children": []
  }, {
    "isSelected": true,
    "name": "Field Work Conducted",
    "children": []
  }]
}]

<table>
  <tr>
    <td>Table Header</td>
    <td>Table Header</td>
  </tr>
  <tr>
  <td colspan="2">
     <div>
       Your all check box here
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia repellat voluptas, alias, culpa rerum voluptate cupiditate tenetur vitae maiores consequuntur tempora hic error, commodi soluta officiis eaque magnam doloremque illo.
    </div>
    </td>
  </tr>
</table>

div{
  max-width:200px;
  height: 100px;
  overflow-y:scroll;
}

   <table class="table">
        <thead ng-show="data.name === 'Location'">
            <td class="noBorder" colspan="2">
                <button data-ng-click="reportsvm.changeLocation(data, true)" data-ng-class="" class="btn btn-default btn-sm">
                    Regions</button>
                <button data-ng-click="reportsvm.changeLocation(data, false)" data-ng-class="" class="btn btn-default btn-sm pull-right">
                    State/Territory</button>
            </td>
        </thead>
        <!-- Put selectAll/clearAll buttons here -->
        <thead ng-if="data.children.length > 0 && !$parent.$parent.$parent.data">
            <td class="noBorder" colspan="2">
                <a href="javascript:;" class="btn btn-default-off btn-xs select-all" data-ng-click="reportsvm.selectAll(data)">Select All</a>
                <a href="javascript:;" class="btn btn-default-off btn-xs reset-all" data-ng-click="reportsvm.clearAll(data)">Clear All</a>
            </td>
        </thead>

        <tbody class="table-scroll">
        <!-- Remove selectAll/clearAll buttons
        <tr ng-if="data.children.length > 0 && !$parent.$parent.$parent.data">
            <td class="noBorder" colspan="2">
                <a href="javascript:;" class="btn btn-default-off btn-xs select-all" data-ng-click="reportsvm.selectAll(data)">Select All</a>
                <a href="javascript:;" class="btn btn-default-off btn-xs reset-all" data-ng-click="reportsvm.clearAll(data)">Clear All</a>
            </td>
        </tr>
        -->
        <tr ng-repeat-start="data in data.children">
            <td class="noBorder">
                <label>
                    <input type="checkbox" value="{{data.name}}" ng-change="reportsvm.changeValue(data, $parent.$parent.$parent)" ng-model="data.isSelected">
                    <span class="clickable">{{data.name}}</span>
                </label>
            </td>