Как добавить полосу прокрутки в теле таблицы, когда строк таблицы достигает более 5? - PullRequest
Новая
       10

Как добавить полосу прокрутки в теле таблицы, когда строк таблицы достигает более 5?

0 голосов
/ 18 мая 2018

Допустим, я читаю содержимое таблицы из базы данных и печатаю строки таблицы.Иногда у меня может быть более 5 строк данных в базе данных, иногда у меня может быть менее 5 строк данных в базе данных.

То, что я хочу, это когда строки таблицы превышают 5 строк, она должна занимать полосу прокрутки, если она меньше 5 строк, она не должна брать полосу прокрутки.

Я просмотрел множество веб-сайтов, на которых они фиксируют высоту таблицы и, если содержимое превышает эту высоту, она занимает полосу прокрутки.

Поэтому я не хочу, чтобы высота тела таблицы фиксировалась, потому что, когда в теле таблицы меньше содержимого, она принимает фиксированный размер тела таблицы, который выглядит странно. Заранее спасибо. 

<!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 голосов
/ 18 мая 2018

Вы должны посчитать количество строк, а затем добавить класс, если количество строк больше 5. 

$(document).ready(function(){
  var rowCount = $('tbody tr').length;
  if(rowCount > 5){
    console.log(rowCount);
    $('table').addClass('do-scroll');
  }
});
.do-scroll{
  width: 100%;
  height: 220px; 
  display: -moz-grid;
  overflow-y: scroll;
}
<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>
0 голосов
/ 18 мая 2018

С прокручиваемыми столами не так весело играть, поэтому я добавил фрагмент кода, который поможет вам двигаться вперед. 

$(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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...