<!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. 洛谷P2756 飞行员配对方案问题(二分图匹配)

    P2756 飞行员配对方案问题 题目背景 第二次世界大战时期.. 题目描述 英国皇家空军从沦陷国征募了大量外籍飞行员.由皇家空军派出的每一架飞机都需要配备在航行技能和语言上能互相配合的2 名飞行员,其 ...

  2. Gym - 101981G The 2018 ICPC Asia Nanjing Regional Contest G.Pyramid 找规律

    题面 题意:数一个n阶三角形中,有多少个全等三角形,n<=1e9 题解:拿到题想找规律,手画开始一直数漏....,最后还是打了个表 (打表就是随便定个点为(0,0),然后(2,0),(4,0), ...

  3. com.mysql.jdbc.exceptions.jdbc4.MySQLIntegrityConstraintViolationException: Duplicate entry 'admin' for key 'UK_dgxl7aijrr4hq8314exhw407s'

    严重: Servlet.service() for servlet [spring-mvc] in context with path [/learn] threw exception [Reques ...

  4. JS——事件详情（鼠标事件：clientX、clientY的用法）

    鼠标位置 >可视区位置:clientX.clientY 跟着鼠标移动的div案例 代码如下图:   这个案例,运用到前一篇文章中的event事件来处理.获取div的left和top值,当鼠标移动 ...

  5. [BZOJ2017][Usaco2009 Nov]硬币游戏（要复习系列）

    又是DP? 好吧,或者说是博弈论,但是我不会啊. 先搞个O(n^3)的记忆化搜索,然后瞎搞好像发现两个状态几乎一样? 竟然过了样例,然后竟然A了... #include<iostream> ...

  6. MySQL学习笔记之内连接

    不多说,直接上干货!  MySQL的内连接 #内连接,两个表按照条件匹配 select class1.stuid,class1.stuname,class1.sex,course from class ...

  7. jQuery考试之错题分析

    获取元素范围大小顺序依次为: $(#one).siblings("div")>$("#one~div")>$("#one +div&quo ...

  8. ScreenRecord(about C# winform)

    由于一些不得不做的事(哈,有时间再聊),所以就不得不写一个关于录屏的软件了,如此无力的开篇,开始吧. 在网上搜了很多关于录屏的源码,发现都使不了,剧情的需要很难满足.于是突然想到了github上的一个 ...

  9. Windows7环境下Composer 安装包的Cache目录位置

    http://segmentfault.com/a/1190000000355928 https://getcomposer.org/doc/ 要说Composer的用法,以后再说,现在只记录wind ...

  10. CSS框架Bootstrap

    作为一个软件开发人员,经常接触和使用框架是再平常的事情不过了.但是这些框架基本都是和语言相关的,比如WEB框架SpringMVC,JavaEE框架Spring,ORM框架Hibernate,还有Jav ...