<!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. Coursera Algorithms week1 算法分析 练习测验: 3Sum in quadratic time

    题目要求: Design an algorithm for the 3-SUM problem that takes time proportional to n2 in the worst case ...

  2. codevs1519 过路费(最小生成树+LCA)

    1519 过路费  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 大师 Master     题目描述 Description 在某个遥远的国家里,有 n个城市.编号为 1,2 ...

  3. Asp.net跨域配置

    <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Contro ...

  4. oracle命令行登录（默认用户名和密码）

    oracle数据库安装成功之后会有默认的用户名和密码,之前因为没有整理,每次用的时候都要百度很麻烦,所以现在把这些都整理一下,也方便以后使用: 使用scott用户连接:使用sys用户连接:使用syst ...

  5. https 结合使用 对称加密和非对称加密

    (一)对称加密(Symmetric Cryptography) ---共享密钥加密 对称加密是最快速.最简单的一种加密方式,加密(encryption)与解密(decryption)用的是同样的密钥( ...

  6. Android第一次项目

    学习了一个月的Android,接触了人生中第一个安卓项目,对于一个小白来说,总结是很重要的学习方法,以下我把学到的东西总结以下: 1. 1>okhttp3用法解析(边贴代码边熟悉) public ...

  7. 【PLSQL】游标

    Oracle中的SQL在执行时需要分配一块内存区域,这块内存区域叫做上下文区. 上下文区中记录了SQL语句的处理信息,这些信息包括:查询返回的数据行.查询所处理的数据的行号.指向共享池中的已分析的SQ ...

  8. I2C controller core之Bit controller(03)

    FPGA proven, AISC proven, I2C controller core from OpenCores http://opencores.org/project,i2c Bit-co ...

  9. CryptoJS简单使用（request.js) 拦截器的使用

    首先准备一份明文和秘钥: var plaintText = 'aaaaaaaaaaaaaaaa'; // 明文var keyStr = 'bbbbbbbbbbbbbbbb'; // 一般key为一个字 ...

  10. Spring AOP --JDK动态代理方式

    我们知道Spring是通过JDK或者CGLib实现动态代理的,今天我们讨论一下JDK实现动态代理的原理. 一.简述 Spring在解析Bean的定义之后会将Bean的定义生成一个BeanDefinit ...