<!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左右切换 选择年龄的更多相关文章

  1. NVM、NPM、Node.js的安装选择

    在安装和使用这三种工具时,我们有很多方式可以选择,这些方法各有优劣,每个人都有自己用起来比较习惯的配置,所以我在这里记录下自己比较习惯的一种安装方式与其他一些可能的选项. NVM.NPM.Node.j ...

  2. [js开源组件开发]js手机联动选择地区仿ios 开源git

    js手机联动选择地区 前言:由于网上找到了一个mobiscrool,比较全,但是不开源,只能试用15天,正式版竟然要三千块钱,穷人只能自己动手,写了个只针对弹窗地区选择的. 本站点所有的资源均在git ...

  3. [js开源组件开发]js手机联动选择日期 开源git

    js手机联动选择日期 这里在前面的<js手机联动选择地区>的基础上,改造数据源之后形成的一个日期的选择器,当然你可以使用之前的PC上模式的<日期控件>,它同时也支持手机端,ht ...

  4. magento currency magento头部增加币种切换选择

    magento currency magento头部增加币种切换选择 默认magento 货币选择切换是显示在左边 有时候我们需要让其显示在头部 Step 1. Create a new file a ...

  5. js控制日期选择框datetime-local和select的展开

    注: js控制元素展开不受元素css属性的限制,例如opacity,z-index等 1. 使用js控制日期选择框的展开 ios: document.querySelector(".targ ...

  6. chromedriver禁用图片，禁用js，切换UA

    selenium 模拟chrome浏览器,此时就是一个真实的浏览器,一个浏览器该加载的该渲染的它都加载都渲染,所以爬取网页的速度很慢.如果可以不加载图片等操作,网页加载速度就会快不少,代码中列出了了禁 ...

  7. JS实现日期选择

    简单的JS实现日期选择,对于PHP来说就像是遍历一样,不过我个人觉得JS这个很有趣,随便记录一下 开始: <select name="gh_date"><opti ...

  8. jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

  9. 基于SpringBoot+Mybatis plus+React.js实现条件选择切换搜索功能

    笔记/朱季谦 在写React前端逻辑时,经常遇到可以切换不同条件的列表查询功能,例如下边截图这样的,其实,这块代码基本都一个逻辑,可以一次性将实现过程记录下来,待以后再遇到时,直接根据笔记复用即可. ...

随机推荐

  1. PCB 全景图技术实现

    为了对3D模型理解更透,这里采用threejs(WebGL第三方库)实现,刚开始学习入门,为了能看明白基本上每行代码都注释. 如果仅仅是为了实现全景图,可以用photo-sphere-viewer.j ...

  2. IntelliJ IDEA/PyCharm/WebStorm 2019.1.2 注册码激活

    [IDEA2019.1.2最新版版本激活,直接查看底部] 网上IntelliJ IDEA激活方式大多均已失效,目前常用激活方式为License Server 激活: http://idea.imsxm ...

  3. Oracle占用内存过高解决办法

    1.cmd sqlplus system账户登录 2.show parameter sga; --显示内存分配情况 3.alter system set sga_max_size=200m scope ...

  4. DotNetCasClient加载失败问题分析

    最近公司在接入整理单点登录方案的时候,选择了CAS方案,实际版本采用了4.0.当我们把服务端附属完毕,基于.NET平台Web版的客户端DotNetCasClient进行定制化修改后,在测试环境通过.然 ...

  5. 每日算法——新型在线LCA

    在线LCA一般大家都会用倍增吧,时间复杂度O(nlogn),空间复杂度O(nlogn),都是非常严格的复杂度限制,并且各种边界处理比较麻烦,有没有更快更好的办法呢? 我们发现,在树链剖分时,我们不经意 ...

  6. Java中的常用类有哪些

    1NumberFormat 2DecimalFormat 3BigDecimal 4Math 5Random 6DateFormat 7SimpleDateFormat 8Calendar 9Date ...

  7. pgsql 远程机器无法连接数据库报错处理方法

    因本地资源有限,在公共测试环境搭建了PGsql环境,从数据库本地localhost访问正常,在相同网段的远程机器访问报如下错误 “server closed the connection unexpe ...

  8. rabbit channel参数

    channel.exchangeDeclare() channel.ExchangeDeclare(string exchange: "cjlTest",string  type: ...

  9. 复习HTML+CSS（9）

    n  CSS简介 CSS:Cascading Style Sheets 层叠样式表 CSS的主要目的:是给HTML标记添加各种各样的表现(格式.样式).比如:文字样式.背景.文本样式.链接样式. 提示 ...

  10. 【java基础】（2）Java父类与子类的 内存引用讲解

    从对象的内存角度来理解试试.假设现在有一个父类Father,它里面的变量需要占用1M内存.有一个它的子类Son,它里面的变量需要占用0.5M内存.现在通过代码来看看内存的分配情况:Father f = ...