Question

我跟随this jQuery插件从默认的scrollable库中将selectable变成了jQueryUI 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函数无法按预期方式工作（如演示示例）-当用户使用body时table的{{1}}应该是可滚动的（当前是不）。第二个问题是关于元素的selectable，它没有填充100％od窗口。

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

Answer 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很有用。看来您无意中设置了width元素中的<td/>。

jQuery在表格元素中可选且可滚动

1 个答案: