我有一个包含动态内容的表，它可以是1行或更多行，最多可能是200行。用户应该能够单击一行，其他内容应显示在另一个表列表的下方。
现在，当我搜索一个项目时，表格会根据找到的记录缩小，假设我有5条记录并查找1条记录，下面的整个表格元素会跳起来。这不是一个好的ux。
我知道有一种方法可以保持桌子或桌子的高度吗？
这是我的代码到目前为止。您可以按“meyer”搜索
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>
答案 0 :(得分：1)
根据评论，您希望给tbody一个固定的高度，因此标题始终可见。如何做到这一点已经在这里描述：https://stackoverflow.com/a/23989771/639035
你需要css：
#reservationTable thead, #reservationTable tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
#reservationTable tbody {
height: 100px;
table-layout: fixed;
overflow: auto;
display: block;
width: 100%;
}
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"/>
<style>
#reservationTable thead, #reservationTable tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
#reservationTable tbody {
height: 100px;
table-layout: fixed;
overflow: auto;
display: block;
width: 100%;
}
</style>
**Full Code:**
(Tested in Chrome)
<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>