一个对html表格分页的类_html表格分页资源-CSDN文库

共9个文件

gif：4个

js：2个

css：1个

javascript

table

5星 · 超过95%的资源需积分: 49 81 浏览量 2008-04-16 16:17:54 上传评论收藏 38KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

HuidaGrid.rar （9个子文件）

images

Panel_first.gif 340B

Panel_last.gif 342B

Panel_pre.gif 210B

Thumbs.db 7KB

Panel_next.gif 213B

HuidaGrid.js 15KB

prototype.js 121KB

HuidaGrid.css 938B

demo.html 6KB

<!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=utf-8" /> <title>会达表格demo</title> <link rel="stylesheet" type="text/css" href="HuidaGrid.css"/> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="HuidaGrid.js"></script> <script type="text/javascript"> var oGrid; window.onload=function(){ //设置表格的超连接,title var oTrs=$$("#table1 tbody tr").each(function(oTr){ oTr.cells[4].innerHTML="<a href=# onclick=alert(\"" +oTr.cells[4].innerHTML+"\")>" +oTr.cells[4].innerHTML+"</a>"; oTr.cells[5].title="这是我用js添加的title，里边的内容应该和表格内容一致应为:\n"+oTr.cells[5].innerHTML; }); //使表格可分页 oGrid=new HuidaGrid({ el:"table1", pageSize:4, searchField:3, isShowSearch:true, align:"right" }); /*oGrid.setPageSize(4); oGrid.setSearchField(3); oGrid.setSearchDisplay(true); oGrid.setPanelAlign("right");*/ oGrid.init(); } </script> </head> <body> <table id="table1" width="64%" border="1" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse" bordercolor="#ECE9D8"> <thead> <tr> <td width="10%" align="center">下拉框</td> <td width="10%" align="center">文本框</td> <td width="11%" align="center">选择框</td> <td width="10%" align="center">搜索列</td> <td width="22%" align="center">超连接</td> <td width="28%" align="center">Title</td> </tr> </thead> <tbody> <tr> <td align="center"><select name="select" id="select"> <option>男</option> <option>女</option> </select> </td> <td align="center"><input type="text" name="textfield" id="textfield" style="width:50px;"/></td> <td align="center"><input type="checkbox" name="checkbox" id="checkbox" /></td> <td>a11</td> <td>b1</td> <td>c1</td> </tr> <tr> <td align="center"><select name="select2" id="select2"> <option>男</option> <option>女</option> </select></td> <td align="center"><input type="text" name="textfield2" id="textfield2" style="width:50px;"/></td> <td align="center"><input type="checkbox" name="checkbox2" id="checkbox2" /></td> <td>a12</td> <td>b2</td> <td>c2</td> </tr> <tr> <td align="center"><select name="select3" id="select3"> <option>男</option> <option>女</option> </select></td> <td align="center"><input type="text" name="textfield3" id="textfield3" style="width:50px;"/></td> <td align="center"><input type="checkbox" name="checkbox3" id="checkbox3" /></td> <td>a13</td> <td>b3</td> <td>c3</td> </tr> <tr> <td align="center"><select name="select4" id="select4"> <option>男</option> <option>女</option> </select></td> <td align="center"><input type="text" name="textfield4" id="textfield4" style="width:50px;"/></td> <td align="center"><input type="checkbox" name="checkbox4" id="checkbox4" /></td> <td>a14</td> <td>b4</td> <td>c4</td> </tr> <tr> <td align="center"> </td> <td align="center"> </td> <td align="center"><input type="checkbox" name="checkbox5" id="checkbox5" /></td> <td>a21</td> <td>b5</td> <td>c2</td> </tr> <tr> <td align="center"> </td> <td align="center"> </td> <td align="center"><input type="checkbox" name="checkbox6" id="checkbox6" /></td> <td>a22</td> <td>b6</td> <td>c3</td> </tr> <tr> <td align="center"> </td> <td align="center"> </td> <td align="center"><input type="checkbox" name="checkbox7" id="checkbox7" /></td> <td>a23</td> <td>b4</td> <td>c4</td> </tr> <tr> <td align="center"> </td> <td align="center"> </td> <td align="center"><input type="checkbox" name="checkbox8" id="checkbox8" /></td> <td>a24</td> <td>b2</td> <td>c2</td> </tr> <tr> <td align="center"> </td> <td align="center"> </td> <td align="center"><input type="checkbox" name="checkbox9" id="checkbox9" /></td> <td>a31</td> <td>b3</td> <td>c3</td> </tr> <tr> <td align="center"> </td> <td align="center"> </td> <td align="center"><input type="checkbox" name="checkbox10" id="checkbox10" /></td> <td>a32</td> <td>b4</td> <td>c4</td> </tr> <tr> <td align="center"> </td> <td align="center"> </td> <td align="center"><input type="checkbox" name="checkbox11" id="checkbox11" /></td> <td>a33</td> <td>b2</td> <td>c2</td> </tr> <tr> <td align="center"> </td> <td align="center"> </td> <td align="center"><input type="checkbox" name="checkbox12" id="checkbox12" /></td> <td>a34</td> <td>b3</td> <td>c3</td> </tr> <tr> <td align="center"> </td> <td align="center"> </td> <td align="center"><input type="checkbox" name="checkbox13" id="checkbox13" /></td> <td>a41</td> <td>b4</td> <td>c4</td> </tr> <tr> <td align="center"> </td> <td align="center"> </td> <td align="center"><input type="checkbox" name="checkbox14" id="checkbox14" /></td> <td>a42</td> <td>b2</td> <td>c2</td> </tr> <tr> <td align="center"> </td> <td align="center"> </td> <td align="center"><input type="checkbox" name="checkbox15" id="checkbox15" /></td> <td>a43</td> <td>b3</td> <td>c3</td> </tr> <tr> <td align="center"> </td> <td align="center"> </td> <td align="center"><input type="checkbox" name="checkbox16" id="checkbox16" /></td> <td>a44</td> <td>b4</td> <td>c4</td> </tr> </tbody> </table> </body> </html>

评论收藏

内容反馈