Javascript表格翻页效果实现思路及代码_Javascript教程-查字典教程网
Javascript表格翻页效果实现思路及代码
Javascript表格翻页效果实现思路及代码
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:表格翻页body,td{font-size:9pt;}a:link{color:#FF0000;}a:visited{co...

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE>表格翻页</TITLE>

<style>

body, td{

font-size: 9pt;

}

a:link {

color: #FF0000;

}

a:visited {

color: #FF0000;

}

a:hover {

color: #006600;

}

</style>

<SCRIPT LANGUAGE="JavaScript">

<;

coordinatePagenum(pagenum);

showhiddenRecord(pagenum);

}

function nextPage(){

pagenum++;

coordinatePagenum(pagenum);

showhiddenRecord(pagenum);

}

function gotoPage(num){

coordinatePagenum(pagenum);

showhiddenRecord(num);

}

//-->

</SCRIPT>

</HEAD>

<BODY onLoad="showhiddenRecord(pagenum)">

<center>

共 6 页 当前第 <span id="number">1</span> 页

<span id="theFirstPage"><a href="javascript:firstPage()">第一页</a></span>

<span id="thePrePage"><a href="javascript:prePage()">上一页</a></span>

<span id="theNextPage"><a href="javascript:nextPage()">下一页</a></span>

<span id="theLastPage"><a href="javascript:lastPage()">最后一页</a></span>

转到第<select onChange="gotoPage(this.value)" name="goto">

<option value=1>1</option>

<option value=2>2</option>

<option value=3>3</option>

<option value=4>4</option>

<option value=5>5</option>

<option value=6>6</option>

</select>页

</center>

<TABLE id="mytable" cellpadding=4 cellspacing=1 border=0 bgcolor=#999999 width=500 align=center>

<TR bgcolor=#ffffff><TD>标题</TD></TR>

<TR bgcolor=#ffffff><TD>1</TD></TR>

<TR bgcolor=#ffffff><TD>2</TD></TR>

<TR bgcolor=#ffffff><TD>3</TD></TR>

<TR bgcolor=#ffffff><TD>4</TD></TR>

<TR bgcolor=#ffffff><TD>5</TD></TR>

<TR bgcolor=#ffffff><TD>6</TD></TR>

<TR bgcolor=#ffffff><TD>7</TD></TR>

<TR bgcolor=#ffffff><TD>8</TD></TR>

<TR bgcolor=#ffffff><TD>9</TD></TR>

<TR bgcolor=#ffffff><TD>10</TD></TR>

<TR bgcolor=#ffffff><TD>11</TD></TR>

<TR bgcolor=#ffffff><TD>12</TD></TR>

<TR bgcolor=#ffffff><TD>13</TD></TR>

<TR bgcolor=#ffffff><TD>14</TD></TR>

<TR bgcolor=#ffffff><TD>15</TD></TR>

<TR bgcolor=#ffffff><TD>16</TD></TR>

<TR bgcolor=#ffffff><TD>17</TD></TR>

<TR bgcolor=#ffffff><TD>18</TD></TR>

<TR bgcolor=#ffffff><TD>19</TD></TR>

<TR bgcolor=#ffffff><TD>20</TD></TR>

<TR bgcolor=#ffffff><TD>21</TD></TR>

<TR bgcolor=#ffffff><TD>22</TD></TR>

<TR bgcolor=#ffffff><TD>23</TD></TR>

<TR bgcolor=#ffffff><TD>24</TD></TR>

</TABLE>

</BODY>

</HTML>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类