动态添加行时向表体添加自动垂直滚动

Question

我有这个小提琴：

https://jsfiddle.net/desytec/m69q2xwr/34/

<style>
.table-scroll tbody {
    position: absolute;
    overflow-y: auto;
    height: 250px;
}
</style>

<script>
var count = 0;

$(document).ready(function () {
    $('#btnAdd').on('click', function() {
      var tableBody = $('#mytable tbody');
      var newRow =
         '<tr id="tr_' + count + '">' +
             '<td>Test Row ' + count + ' Col 1</td> ' +
             '<td>Test Row ' + count + ' Col 2</td>'
         '</tr>';
         tableBody.append(newRow);
         count++;
         if (count == 3)
             tableBody.addClass('table-scroll');
    });
    $('#btnDelete').on('click', function() {
      var tableBody = $('#mytable tbody');
         tableBody.children().last().remove();
         count--;
         if (count == 2)
             tableBody.removeClass('table-scroll');
    });
});
</script>

<div class="row">
    <div class="row ml-4">
        <button id="btnAdd" type="button" class="btn btn-secondary btn-circle m-4">Add row</button>    
    </div>
    <div class="col-6">
        <button id="btnDelete" type="button" class="btn btn-secondary btn-circle m-4">Delete row</button>    
    </div>    
</div>

<table id="mytable" class="table table-striped dt-responsive w-100 table-bordered display nowrap table-hover mb-0">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

我试图在表格正文中显示一个垂直滚动条，当我动态添加行时将标题固定。

当我添加一行并添加了 3 行时，我正在向表格主体添加一个类，以便它应该显示滚动条，但它不起作用。

这样做的正确方法是什么？

谢谢 詹姆

Answer 1

看起来稍微调整一下样式就可以了。我将“table-scroll”移动为“table”的一个类，因为当滚动条出现时我必须调整标题行。在 css 中，我将 overflow-y 移动到 .table-scroll tbody - 为了防止您的 TD 调整大小，添加一条规则，让它们保持在 50vw。当滚动条出现时，标题和正文注册错误。我在标题行添加了一个小垫片以适应，它并不完美，但它非常接近！

另外，我测量了tbody的高度，而不是count来确定滚动断点。

.table-scroll {
  position: absolute;
  overflow-y: auto;
  height: 150px;
  display:block;
}

.table-scroll td {
  width: 100vw;
}

$(document).ready(function() {
  $('#btnAdd').on('click', function() {
    var tableBody = $('#mytable tbody');
    let count = tableBody.children().length
    var newRow =
      '<tr id="tr_' + count + '">' +
      '<td>Test Row ' + count + ' Col 1</td> ' +
      '<td>Test Row ' + count + ' Col 2</td>'
    '</tr>';
    tableBody.append(newRow);
    adjustTable()
  });
  $('#btnDelete').on('click', function() {
    var tableBody = $('#mytable tbody');
    tableBody.children().last().remove();
    adjustTable()
  });
});

function adjustTable() {
  let maxHeight = 250
  // console.log($('#mytable tbody').height() > maxHeight)
  if ($('#mytable tbody').height() >= maxHeight) $('#mytable').addClass('table-scroll');
  else $('#mytable').removeClass('table-scroll');

}

.table-scroll  {
  height: 285px;
}

.table-scroll tbody {
  position: absolute;
  overflow-y: auto;
  height: 250px;
}

.table-scroll tbody td {
  width: 50vw;
}

#mytable .shim {
  display: none;
  width: 13px;
  padding: 0;
  background: #DFDFDF;
}

#mytable.table-scroll .shim {
  display: table-cell;
}

.table-container{
margin-bottom:15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<div class="row">
  <div class="row ml-4">
    <button id="btnAdd" type="button" class="btn btn-secondary btn-circle m-4">Add row</button>
  </div>
  <div class="col-6">
    <button id="btnDelete" type="button" class="btn btn-secondary btn-circle m-4">Delete row</button>
  </div>
</div>
<div class='table-container'>
<table id="mytable" class="table table-striped dt-responsive w-100 table-bordered display nowrap table-hover mb-0">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th class='shim'></th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
</div>
<p>Other content...</p>