0
私はダイナミックな内容のテーブルを持っています。これは1行以上、おそらく最大200行です。ユーザーは1行をクリックでき、追加の内容は別のテーブルのリストの下に表示されるはずです。<table>を固定高さに留めるにはどうすればいいですか？ブートストラップ4
ここで、アイテムを検索すると、見つかったレコードに基づいてテーブルが縮小されます.5レコードがあり、1レコードが検索され、テーブル要素全体が上にジャンプします。これは良いuxではありません。
テーブルやテーブル本体の高さを保つ方法があることは知っていますか？
ここまでは私のコードです。あなたはコメントをもとに、「メイヤー」
function reservationListFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("reservationListInput");
filter = input.value.toUpperCase();
table = document.getElementById("reservationTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
if (!tr[i].classList.contains('header')) {
td = tr[i].getElementsByTagName("td"),
match = false;
for (j = 0; j < td.length; j++) {
if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
match = true;
break;
}
}
if (!match) {
tr[i].style.display = "none";
} else {
tr[i].style.display = "";
}
}
}
}
jQuery(document).ready(function($) {
$('#reservationTable tr').each(function() {
var td_value = $('td',this).eq(4).text();
console.log(td_value);
switch (td_value) {
case 'Expected':
$(this).addClass('table-success');
break;
case 'Inhouse':
$(this).addClass('table-info');
break;
case 'Cancelled':
$(this).addClass('table-danger');
break;
case 'Partial':
$(this).addClass('table-warning');
break;
case 'Finished':
$(this).addClass('table-active');
break;
default:
// statements_def
break;
}
});
});
$(document).ready(function() {
$("#wrapper").toggleClass("toggle");
});<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="" id="reservationListTable">
<div class="row">
</div>
<input style="margin-top:0.5em" class="form-control" type="text" id="reservationListInput" onkeyup="reservationListFunction()" placeholder="Search for reservation..">
<div classs="container">
<table class="table table-responsive table-fixed table-fixedResList" id="reservationTable">
<thead class="">
<tr class="header">
<th style="width:40%;">Name</th>
<th style="width:10%;">Cabin</th>
<th style="width:10%;">Guests</th>
<th style="width:10%;">Table</th>
<th class="hidden-xs-down" style="width:10%;">Status</th>
<th class="hidden-xs-down" style="width:5%;">SR</th>
<th class="hidden-xs-down" style="width:5%;">DOB</th>
<th style="width:10%;">Action</th>
</tr>
</thead>
<tbody class="">
<tr class="">
<td class="">Alfreds Futterkiste</td>
<td class="">49222</td>
<td class="">14</td>
<td class="">201</td>
<td class="hidden-xs-down">Expected</td>
<td class="hidden-xs-down">SR(2)</td>
<td class="hidden-xs-down">BD</td>
<td class="">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
<tr class="">
<td class="">Alfreds Futterkiste</td>
<td class="">49222</td>
<td class="">14</td>
<td class="">201</td>
<td class="hidden-xs-down">Expected</td>
<td class="hidden-xs-down">SR(2)</td>
<td class="hidden-xs-down">BD</td>
<td class="">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
<tr class="">
<td class="">Julia Sanders</td>
<td class="">10293</td>
<td class="">4</td>
<td class="">201</td>
<td class="hidden-xs-down">Cancelled</td>
<td class="hidden-xs-down">SR(2)</td>
<td class="hidden-xs-down">BD</td>
<td class="">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
<tr class="">
<td class="">Mirko Meyer</td>
<td class="">13293</td>
<td class="">2</td>
<td class="">132</td>
<td class="hidden-xs-down">Partial</td>
<td class="hidden-xs-down">SR(2)</td>
<td class="hidden-xs-down">BD</td>
<td class="">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
<tr class="">
<td class="">Alfreds Futterkiste</td>
<td class="">49222</td>
<td class="">14</td>
<td class="">201</td>
<td class="hidden-xs-down">Expected</td>
<td class="hidden-xs-down">SR(2)</td>
<td class="hidden-xs-down">BD</td>
<td class="">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
<tr class="">
<td class="">Alfreds Futterkiste</td>
<td class="">49222</td>
<td class="">14</td>
<td class="">201</td>
<td class="hidden-xs-down">Expected</td>
<td class="hidden-xs-down">SR(2)</td>
<td class="hidden-xs-down">BD</td>
<td class="">
<div class="btn-group">
<button type="button" class="btn btn-secondary btn-sm">Checkin</button>
<button type="button" class="btn btn-secondary btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Cancel</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Edit</a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container">
<table class="table table-responsive table-fixed" id="reservationDetailTable">
<tr class="header">
<th style="width:20%;">Primary Guest</th>
<th style="width:80%;">Info</th>
</tr>
<tr>
<td rowspan="8">
<div class="card" style="width: 20rem; border-style: solid; border-color: #ffffff;">
<img class="card-img-top img-circle" src="./assets/img/3.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Mark Meyer</h4>
<p class="card-text">Cabin 23412</p>
<a href="#" class="btn btn-info">EDIT</a>
</div>
</div>
</td>
<td>Reservation ID</td>
</tr>
<tr>
<td>Guests Associated</td>
</tr>
<tr>
<td>Reservation Date</td>
</tr>
<tr>
<td>Special Request</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
スニペットは、いくつかの誤りが含まれています！編集してください！ –
なぜあなたはCSSに固定された高さをテーブルに与えませんか？ #reservationTable {height：200px; } – Stefan
これは高さを与えるのは良いことですが、ヘッダーを残す必要もあります。さもなければそれはスクロールするでしょう。 – Chris