<!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. Shuffle'm Up(串)

    http://poj.org/problem?id=3087 题意:每组3个串,前两个串长度为n,第三个串长度为2*n,依次从第二个串(s2)中取一个字符,从第一个串(s1)中取一个字符,...... ...

  2. thinkphp方便分页的page方法

    page方法也是模型的连贯操作方法之一,是完全为分页查询而诞生的一个人性化操作方法. 用法 我们在前面已经了解了关于limit方法用于分页查询的情况,而page方法则是更人性化的进行分页查询的方法,例 ...

  3. Python 35 进程间的通信（IPC机制）、生产者消费者模型

    一:进程间的通信(IPC):先进先出  管道:队列=管道+锁 from multiprocessing import Queue q=Queue(4) q.put(['first',],block=T ...

  4. python 9：list.reverse()（倒置原列表,可恢复改变）

    bicycles = ['trek', 'cannondale', 'redline', 'specialized'] print(bicycles) bicycles.reverse() #倒置原列 ...

  5. 自学Python四 爬虫基础知识储备

    首先,推荐两个关于python爬虫不错的博客:Python爬虫入门教程专栏   和 Python爬虫学习系列教程 .写的都非常不错,我学习到了很多东西!在此,我就我看到的学到的进行总结一下! 爬虫就是 ...

  6. Java中Ajaxa中文乱码问题

    客户端: url='test/queryList?itemName='+itemName; //如果只转一次url=encodeURI(toUrl);   到后台时:乱码    servlet里dec ...

  7. CSS命名规则和如何命名

    CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...

  8. buf.readInt16LE函数详解

    offset {Number} 0 noAssert {Boolean} 默认:false 返回:{Number} 从该 Buffer 指定的带有特定尾数格式(readInt16BE() 返回一个较大 ...

  9. Android 解析XML—pull解析方式

    在Android中,常见的XML解析器分别为SAX解析器.DOM解析器和PULL解析器,其中PULL解析器小巧轻便,解析速度快,简单易用,非常适合在Android移动设备中使用,Android系统内部 ...

  10. sql server数据库可疑状态解决方法

    前段时间客户数据服务器断电,开机后发现数据库状态标记为可疑,可能是断电引起的数据库日志文件损坏,修复方法如下: 只有mdf文件,重建日志: --注:example为测试用数据库,相应的Example_ ...