<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<title>无标题文档</title>
<style>
.text{
size:10;
border:1px solid 0px;
height:30px;
width:30px;
font-size:24px;
text-align:center}
.tables{
height:50px;
width:350px;
font-size:24px;
text-align:center;
}
.table-chin{
height:50px;
width:250px;
font-size:24px;
text-align:center;
font-family:"微软雅黑", "宋体";
color:#FF0000;
}
.tds{
width:50px;
color:#FF0000;}
</style>
<script type="text/javascript">
var pagenum=30;
function pre(){
if(pagenum==0){
return;
}else{
var str="";
for(var i=pagenum-5;i<pagenum;i++){
str=str+"<td onclick='getval(this)'>"+i+"</td>"
}
document.getElementById('conten').innerHTML=str;
pagenum=pagenum-5;
}
}
function next(){
if(pagenum==100){
return;
}else{
var str="";
for(var i=pagenum;i<pagenum+5;i++){
str=str+"<td onclick='getval(this)'>"+i+"</td>"
}
document.getElementById('conten').innerHTML=str;
pagenum=pagenum+5;
}
}
$(function(){
var chars="<td onclick='getval(this)'>30</td><td onclick='getval(this)'>31</td><td onclick='getval(this)'>32</td><td onclick='getval(this)'>33</td><td onclick='getval(this)'>34</td>";
document.getElementById('conten').innerHTML=chars;
});
function getval(v){
alert(v.innerHTML);
$(v).css('background-color','#ADADAD').siblings().css('background-color','')
}
</script>
</head>
<body>
<table class="tables">
<tr>
<td class="tds" onclick="pre()"><</td>
<td>
<table class="table-chin">
<tr id="conten">
<td onclick="" background="">1</td><td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
</table>
</td>
<td class="tds" onclick="next()">></td>
</tr>
</table>
</body>
</html>
