我有一个300px固定高度的div。在div内部有一个表,其输入具有更大的高度,这使得div可以滚动(这是我的选项,所以我希望它是溢出的:自动)..我没有超过300px的空间 使用按键事件我希望有人在桌面上上下移动,但是当他去到最后一个可见的td时,div不会滚动,所以用户继续到下一个td但是td不再可见因为滚动 我希望div在最后一个可见的td中向上滚动并在td.height()中滚动
有什么建议吗?
到目前为止,当有人通过向上和向下按键更改td时,我会添加一个类
$(document).ready(function() {
$('body').keypress(function(event){
var a = $('#table .borderRed');
if((event.keyCode)=="40"){
a.parent().next().children().addClass('borderRed');
a.removeClass('borderRed');
}
else if ((event.keyCode)=="38"){
a.parent().prev().children().addClass('borderRed');
a.removeClass('borderRed');
}
});
});
该表位于容器内,高度为300px;和溢出:auto; 并且表的第一个td有一个类1,这是我要添加的类..
.borderRed{ border: 1px solid red;}
.container {width: auto; height:300px; overflow:auto;}
HTML
<div class="container">
<table id='table' width='100%'>
<tr>
<td class='borderRed'>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
</table>
</div>
抱歉缩进。我是stackoverflow和Jquery的新手.. 为了使表格滚动并测试功能或者只是降低300px的高度,我的tds达到了tp 16
答案 0 :(得分:0)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../../Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('body').keypress(function (e) {
var obj = $('#table').find('.borderRed');
var code = (e.keyCode ? e.keyCode : e.which);
if (code === 40) {
if ($('#table tr:last td:last').hasClass('borderRed') === true) {
$('#table tr:first td:first').addClass('borderRed');
}
else {
obj.parent().next().children().addClass('borderRed');
}
obj.removeClass('borderRed');
}
else if (code === 38) {
if ($('#table tr:first td:first').hasClass('borderRed') === true) {
$('#table tr:last td:last').addClass('borderRed');
}
else {
obj.parent().prev().children().addClass('borderRed');
}
obj.removeClass('borderRed');
}
});
});
</script>
<style type="text/css">
.borderRed
{
border: 1px solid red;
}
.container
{
width: auto;
height: 300px;
overflow: auto;
}
</style>
</head>
<body>
<div class="container">
<table id='table' width='100%'>
<tr>
<td class='borderRed'>
1
</td>
</tr>
<tr>
<td>
2
</td>
</tr>
<tr>
<td>
3
</td>
</tr>
<tr>
<td>
4
</td>
</tr>
<tr>
<td>
5
</td>
</tr>
<tr>
<td>
6
</td>
</tr>
<tr>
<td>
7
</td>
</tr>
</table>
</div>
</body>
</html>