jquery操作html,table。点击按钮,逐行滚动显示,自动选中下一行数据
**以下为示例:
以下为代码:
首先html引用jquery.js**
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#div{
position: absolute;
overflow:auto;
top:50px;
height:100px;
width:200px;
}
#table{
border:solid #add9c0; border-width:1px 0px 0px 1px;
border-collapse: collapse;
}
td{
border:solid #add9c0; border-width:0px 1px 1px 0px;
}
.tr_bgcolor{
background-color: #DFDFDF;
}
</style>
<body>
<div id="div">
<table id="table">
</table>
</div>
<input type="button" id="btn" value="下一项" />
</body>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
var data = [];
var toScroll = 0;
for(var i = 0; i < 20; i++){
data[i] = "test" + i;
}
$(data).each(function(i,o){
var tr =
"<tr class='tr' id='"+i+"'>"
+"<td id='td1'>"
+"<input id='c1' type='checkbox'/>"
+"</td>"
+"<td id='td2'>" + o + "</td>"
+"</tr>";
$("#table").append(tr);
});
$("#btn").click(function(){
$(".tr").children().eq(0).children("#c1").attr("checked","checked").attr("disabled","disabled");
$(".tr").eq(0).attr("class","tr_bgcolor");
var div = $("#div");
var nowPos = div[0].scrollTop; //当前值
var maxPos = div[0].scrollHeight; //最大值
toScroll += $(".tr")[0].clientHeight; //每个tr的高度
changePos(div, nowPos, maxPos, toScroll);
});
function changePos(div, from, to, h){
if(from < to && div[0].scrollTop < to) {
div[0].scrollTop = h;
}
}
});
</script>
</html>