js左右切换选择年龄

浏览数：30 / 时间：2015年06月09日

<!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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

js左右切换选择年龄