<!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. 第13课 SmartGit程序操作介绍

    http://www.syntevo.com/

  2. 使用Github做服务器展示前端页面

    1)在github上创建自己一个项目,项目名称必须是你的github账号名.github.io  譬如 fk123456.github.io 因为我已经创建了,所以显示名字重复. 2)使用命令行的方式 ...

  3. RabbitMQ .NET消息队列使用入门(二)【多个队列间消息传输】

    孤独将会是人生中遇见的最大困难. 实体类: DocumentType.cs public enum DocumentType { //日志 Journal = 1, //论文 Thesis = 2, ...

  4. C#：设置webBrowser框架与系统相对应的IE内核版本

    通常情况下,我们直接调用C#的webBrowser控件,默认的浏览器内核是IE7.  那么如何修改控件调用的默认浏览器版本呢? /// <summary> /// 修改注册表信息来兼容当前 ...

  5. Laravel5.1学习笔记8 Blade模板

    简介 模板继承 定义一个页面布局模板 扩展一个页面布局模板 展示数据 控制语法的结构 Service Injection 扩展 Blade   简介 Blade 是 Laravel 提供的一个既简单又 ...

  6. 无桌面的linux 安装VMWare Tools

    1.在vmware虚拟机选项下,选择安装vmware-tools 2.将vmware安装目录下的linux.iso装载到系统中 2.1.选择需安装VMWareTools的虚拟机,右击--可移动设备-- ...

  7. Eclipse之注释部分代码

    有时为了调试,部分代码需要注释掉,如果一行一行的加注释符特别麻烦. 一.快捷键:ctrl+/ 选择需要注释的部分,点Ctrl+/,这段代码前,自动加注释语. 取消注释也是按Ctrl+/ 步骤: 选择需 ...

  8. 安卓Java读取SD卡文本文件

    在进行序列识别时,需要对多个模式串进行识别,需要对多行浮点数进行读取,并进行解析. 所以使用的方法为: 使用文本多行读取的方式:对每行文本进行正则表达式匹配:再进行字符转换. 代码如下:        ...

  9. java StringUtils

    /** * */ package com.sign.utils; import java.util.regex.Pattern; /** * @author Administrator * creat ...

  10. matlab学习菜单控件的基本用法

    编辑菜单项 上下文菜单,即弹出菜单 然后添加一个坐标系 添加回调函数 %余弦曲线x=0:0.01:2*pi;y=cos(x);axes(handles.axes1);%将坐标系的值写进h=plot(x ...