我为此所做的所有代码都在下面给出,我希望表格主体能够滚动并且工作得很好,但是当我在选择行后使用向下箭头进行滚动时,它隐藏在表格头内的问题如何解决,请帮帮我。
<script>
$("#reservationTable1 tr").click(function(evt) {
var element = $(evt.target);
var tableElement = element.parents('table');
tableElement.find('tr').removeClass('highlighted');
element.parents('tr').addClass('highlighted');
});
$('#reservationTlbBody1').on('keypress', 'tr', function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
var highlightedRow = $("#reservationTable1 .highlighted");
if (highlightedRow.length > 0) // table cell is selected
{
var tbodyElement = highlightedRow.parents('tbody');
var trElements = tbodyElement.find('tr');
var nextElement = highlightedRow.next('tr');
var prevElement = highlightedRow.prev('tr');
trElements.removeClass("highlighted");
if (keycode == '9') {
//alert("hhh");
if (nextElement.length) {
nextElement.addClass('highlighted');
var modalId2 = $(this).closest('tr').attr('id');
copyData(modalId2);
} else if (trElements.length) {
$(trElements[0]).addClass('highlighted');
}
}
if (keycode == '40') {
if (nextElement.length) {
nextElement.addClass('highlighted');
var c_id = highlightedRow.attr('id');
copyData(c_id);
} else if (trElements.length) {
$(trElements[0]).addClass('highlighted');
}
}
if (keycode == '38') {
if (prevElement.length) {
prevElement.addClass('highlighted');
var c_Previd = highlightedRow.attr('id');
copyData(c_Previd);
} else if (trElements.length) {
$(trElements[trElements.length - 1]).addClass('highlighted');
}
}
if (keycode == '13') {
var c_EntrId = $(this).closest('tr').attr('id');
copyData(c_EntrId);
}
}
});
</script>
<style>
.highlighted{
background-color: pink;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
}
section.positioned {
position: absolute;
top:100px;
left:100px;
width:800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 200px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
padding: 10px 25px;
}
th {
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #000;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div{
border: none;
}
</style>
<section class="">
<div class="container" style="padding:0px;">
<table id="reservationTable1" tabindex='0'>
<thead>
<tr class="header">
<th>
Col1
<div>Col1</div>
</th>
<th>
Col2
<div>Col2</div>
</th>
<th >
Col3
<div>Col3</div>
</th>
</tr>
</thead>
<tbody id="reservationTlbBody1" style="overflow: auto; height:200px!important;" tabindex='1' >
<tr class="clickable-row jsearch-row" tabindex='0'>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="clickable-row jsearch-row" tabindex='2'>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="clickable-row jsearch-row" tabindex='3'>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr class="clickable-row jsearch-row" tabindex='4'>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr class="clickable-row jsearch-row" tabindex='5'>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr class="clickable-row jsearch-row" tabindex='6'>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr class="clickable-row jsearch-row" tabindex='0'>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="clickable-row jsearch-row" tabindex='2'>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr class="clickable-row jsearch-row" tabindex='3'>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr class="clickable-row jsearch-row" tabindex='4'>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr class="clickable-row jsearch-row" tabindex='5'>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr class="clickable-row jsearch-row" tabindex='6'>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>
</div>
</section>
最佳答案
您要做的就是将$("#reservationTlbBody1").on(...)
更改为$(document).on(...)
然后它将正常工作。
关于javascript - 如何使用向上和向下键进行更改选择,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39785752/