标签:
<!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>
标签:
原文地址:http://blog.csdn.net/itlqi/article/details/44341363