当表行达到5以上时如何将滚动条添加到表体？

时间：2018-05-18 10:20:23

标签： html twitter-bootstrap-3

让我们说我正在从数据库中读取表格内容并打印表格行。有时我在数据库中可能有超过5行的数据，有时我可能在数据库中有少于5行的数据。

我想要的是当表行超过5行时它应该采用滚动条，如果它少于5行则不应该采用滚动条。

我经历了许多网站，他们修复了桌子的身高，如果内容超过了这个高度则会占用滚动条。

所以我不想要固定桌子的身高，因为当桌子中的内容较少时，固定的桌子体尺会看起来很奇怪。 < / strong>提前致谢。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body style="background-color:#F0F3F4">
<div class="container">
  <br/><br/><br/><br/>
  <div class="well" style="background-color:#FDFEFE" ><br/>
  <div class="row">
    <div class="col-xs-12">
      <div class="col-xs-8">
        <p class="col-md-10">This is to test the functionality of this table</p>
      </div>
      <div class="col-xs-4">
        <input class="form-control" id="myInput" type="text" placeholder="Search for a test....">
      </div>
    </div>
  </div>
  <br/>
  <table class="table">
    <thead class="table table-bordered" style="background-color:#EBF5FB">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody scrollbars="yes" id="myTable" class="dyn-height">
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@mail.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@greatstuff.com</td>
      </tr>
    </tbody>
  </table>

  <p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
  </div>
</div>

<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>

</body>
</html>

我的表格如下图所示。 enter image description here

2 个答案:

答案 0 :(得分：2)

可滚动的桌子并不是最有趣的，所以我添加了一个可以让你继续前进的片段。

$(document).ready(function(){
 if(  $('#results tr').length >= 5 ) {
      $('#myTable').addClass('add-scroll');
  }
});
.add-scroll {
  overflow-y: scroll;
  height: 100px;
}

#results tr td {
   width: 33%;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body style="background-color:#F0F3F4">
<div class="container">
  <br/><br/><br/><br/>
  <div class="well" style="background-color:#FDFEFE" ><br/>
  <div class="row">
    <div class="col-xs-12">
      <div class="col-xs-8">
        <p class="col-md-10">This is to test the functionality of this table</p>
      </div>
      <div class="col-xs-4">
        <input class="form-control" id="myInput" type="text" placeholder="Search for a test....">
      </div>
    </div>
  </div>
  <br/>
  <table class="table">
    <thead class="table table-bordered" style="background-color:#EBF5FB">
      <tr>
      <td>
        <table width="100%" height="40">
        <tr>
        <th width="33%">Firstname</th>
        <th width="33%">Lastname</th>
        <th width="33%">Email</th>
         </tr>
        </table>
      </td>
        
      </tr>
    </thead>
    <tbody scrollbars="yes" class="dyn-height">
      <tr>
      <td>
      <div id="myTable">
     <table width="100%" id="results">
             <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@mail.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@greatstuff.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@greatstuff.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@greatstuff.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@greatstuff.com</td>
      </tr>  
     </table>  
   </div>
      </td>
      </tr>
    </tbody>
  </table>

  <p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
  </div>
</div>

</body>

答案 1 :(得分：1)

当行数大于5时，您必须计算行数，然后添加类。

＆＃13;
＆＃13; 
$(document).ready(function(){
  var rowCount = $('tbody tr').length;
  if(rowCount > 5){
    console.log(rowCount);
    $('table').addClass('do-scroll');
  }
});
＆＃13; 
.do-scroll{
  width: 100%;
  height: 220px; 
  display: -moz-grid;
  overflow-y: scroll;
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<body style="background-color:#F0F3F4">
<div class="container">
  <br/><br/><br/><br/>
  <div class="well" style="background-color:#FDFEFE" ><br/>
  <div class="row">
    <div class="col-xs-12">
      <div class="col-xs-8">
        <p class="col-md-10">This is to test the functionality of this table</p>
      </div>
      <div class="col-xs-4">
        <input class="form-control" id="myInput" type="text" placeholder="Search for a test....">
      </div>
    </div>
  </div>
  <br/>
  <table class="table">
    <thead class="table table-bordered" style="background-color:#EBF5FB">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody scrollbars="yes" id="myTable" class="dyn-height">
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@mail.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@greatstuff.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@greatstuff.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@greatstuff.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@greatstuff.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@greatstuff.com</td>
      </tr>
    </tbody>
  </table>

  <p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题