代码之家 › 专栏 › 技术社区 › jstuardo

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

bootstrap-4 css jquery html

jstuardo · 技术社区 · 5 年前

我有把小提琴:

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行时,我正在向表体添加一个类,这样它应该显示滚动条,但它不起作用。

正确的方法是什么?

谢谢詹姆

1 回复 | 直到 5 年前

Kinglish 5 年前

看起来稍微改变一下风格就能让你达到目的。我将“表格滚动”改为“表格”的一个类,因为当滚动条出现时,我必须调整标题行。在css中,我移动了 overflow-y 到 .table-scroll tbody -为了防止你的TD的尺寸因此而变大,为那些保持不变的TD添加一条规则 50vw .当滚动条出现时,标题和正文错误注册。我在标题行添加了一个小垫片,以适应,这不是完美的,但它是该死的接近!

还有,而不是 count 为了确定滚动断点,我测量了 tbody .

.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>