jQuery 在表格元素中可选择和可滚动答案

【问题标题】：jQuery selectable and scrollable in table elementjQuery 在表格元素中可选择和可滚动
【发布时间】：2019-07-03 17:51:56
【问题描述】：

我按照this jquery 插件从默认的jQueryUI 库中制作scrollable selectable element。

演示将列表显示为ul html 元素，我想创建一个使用此功能的table。我需要将table 宽度声明为100% 和td 宽度50%。

我的代码是：

<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>
    <script src="http://karolyi.github.io/ui-selectableScroll/javascripts/selectableScroll.js"></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="jquery-ui-ext.css">
    <style type="text/css"> 
        <style>
            .fixed_header{
                width: 100%;
                border-collapse: collapse;
            }
            .fixed_header tr{
                width: 100%;
            }
            .fixed_header td{
                width: 50%;
            }
            .fixed_header tbody{
              display:block;
              width: 100%;
              overflow: auto;
              height: 100px;
            }
            td.ui-selecting {
              border: 1px dotted red;
            }
            td.ui-selected {
              background: red;
            }
        </style>
        <script>
            $(document).ready(function () {
                $('.fixed_header').selectableScroll({
                  filter: 'td'
                });
              });
        </script>
    </head>
    <body>  
        <div style="width:100%;height:300px;background:black"></div>
        <table class="fixed_header">
          <tbody>
            <tr><td>row 1-0</td><td>row 1-1</td></tr>
            <tr><td>row 2-0</td><td>row 2-1</td></tr>
            <tr><td>row 3-0</td><td>row 3-1</td></tr>
            <tr><td>row 4-0</td><td>row 4-1</td></tr>
            <tr><td>row 5-0</td><td>row 5-1</td></tr>
            <tr><td>row 6-0</td><td>row 6-1</td></tr>
            <tr><td>row 7-0</td><td>row 7-1</td></tr>
          </tbody>
        </table>
    </body>
</html>

还有一些问题。最重要的是因为scrollable 函数不能按预期工作（如演示示例） - 当用户使用selectable 时，table 的body 应该是可滚动的（当前不是）。第二个问题是关于我的元素的witdh，它没有填充 100% od 窗口。

如何在表格中创建可选择和可滚动的？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您可以通过将表格包裹在 <div/> 中并在其中设置最大高度来实现预期结果。您还需要删除.fixed_header tbody{display:block;} 以获得<td/> 的全宽。另外，请参阅Max-Height in Html Table。

$(document).ready(function() {
  $('#pane').selectableScroll({
    filter: 'td'
  });
});

#pane{
    display: block;
    overflow-y: scroll;
    max-height:100px;
 }
 .fixed_header {
   width: 100%;
   border-collapse: collapse;
 }

 .fixed_header tr {
   width: 100%;
 }

 .fixed_header td {
   width: 50%;
 }

 .fixed_header tbody {
   /* display: block; */
   width: 100%;
   overflow: auto;
   height: 100px;
 }

 td.ui-selecting {
   border: 1px dotted red;
 }

 td.ui-selected {
   background: red;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.js"></script>
<script src="http://karolyi.github.io/ui-selectableScroll/javascripts/selectableScroll.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="jquery-ui-ext.css">
    
<html>
  <body>
    <!-- <div style="width:100%;height:300px;background:black"></div> -->
    <div id="pane">
      <table class="fixed_header">
        <tbody>
          <tr>
            <td>row 1-0</td>
            <td>row 1-1</td>
          </tr>
          <tr>
            <td>row 2-0</td>
            <td>row 2-1</td>
          </tr>
          <tr>
            <td>row 3-0</td>
            <td>row 3-1</td>
          </tr>
          <tr>
            <td>row 4-0</td>
            <td>row 4-1</td>
          </tr>
          <tr>
            <td>row 5-0</td>
            <td>row 5-1</td>
          </tr>
          <tr>
            <td>row 6-0</td>
            <td>row 6-1</td>
          </tr>
          <tr>
            <td>row 6-0</td>
            <td>row 6-1</td>
          </tr>
          <tr>
            <td>row 6-0</td>
            <td>row 6-1</td>
          </tr>
          <tr>
            <td>row 6-0</td>
            <td>row 6-1</td>
          </tr>
          <tr>
            <td>row 7-0</td>
            <td>row 7-1</td>
          </tr>
        </tbody>
      </table>
    </div>

  </body>

</html>

更新：您可能还会发现仔细查看colspans 和rowspans 会很有用。您似乎无意中设置了 <td/> 元素的 width。

【讨论】：

很遗憾你的代码对我不起作用（可选择的滚动条不起作用）
@karlperson 您是否打算仅在选择了<td/> 时才使表格可滚动？
no, table has a fix height so should be scrollable when noitems are selected and when items are selecting - when user select item and take cursor on the bottom of the table the scroll should work automatically (check the来自我的问题的演示，这正是我想要的 - 只是为了表格而不是列表）