js分页时遇到问题

js分页时从数据库取出的数据每行的列列之间不对齐，可能这样说不太清楚效果图、代码如下<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>    
    <title>My JSP 'roadcon.jsp' starting page</title>
    
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->  </head>
  
  <body>
 <table width="80%" border="0" cellpadding="0" cellspacing="1" bgcolor="#a8c7ce">
  <tr>
    <td width="20%" height="29" align="center" bgcolor="#a8c7ce" scope="col" ><strong>ID</strong></td>
    <td width="20%" height="29" align="center" bgcolor="#a8c7ce" scope="col"><strong>信息</strong></td>
    <td width="20%" height="29" align="center" bgcolor="#a8c7ce" scope="col"><strong>日期</strong></td>
    <td width="20%" height="29" align="center" bgcolor="#a8c7ce" scope="col"><strong>操作</strong></td>
  </tr>
</table>
<div id="pageList">
<table width="80%" border="0" cellspacing="1" cellpadding="0" bgcolor="#CCCCCC">
    <s:iterator value="list">
    <tr>
     <td width="20%" align="center"><s:property value="id" /></td>
     <td width="20%" align="center"><s:property value="information" /></td>
     <td width="20%" align="center"><s:property value="date" /></td>
     <td width="20%" align="center"><a href="<s:url action="StudentAction_queryById.action"><s:param name="id"><s:property value="id"/></s:param></s:url>">删除</a></td>
 </tr>
    </s:iterator>
 </table>
 </div>
<div id="fengye" >
</div>
<script language="javascript">
var obj,j;
var page=0;
var nowPage=0;//当前页
var listNum=5;//每页显示<ul>数
var PagesLen;//总页数
var PageNum=5;//分页链接接数(5个)
onload=function(){
obj=document.getElementById("pageList").getElementsByTagName("tr");
j=obj.length
PagesLen=Math.ceil(j/listNum);
upPage(0)
}
function upPage(p){

nowPage=p
for (var i=0;i<j;i++){
obj[i].style.display="none"
}
for (var i=p*listNum;i<(p+1)*listNum;i++){
if(obj[i])obj[i].style.display="block"
}
//分页链接变换
strS='<a href="###" onclick="upPage(0)">首页</a>  '
var PageNum_2=PageNum%2==0?Math.ceil(PageNum/2)+1:Math.ceil(PageNum/2)
var PageNum_3=PageNum%2==0?Math.ceil(PageNum/2):Math.ceil(PageNum/2)+1
var strC="",startPage,endPage;
if (PageNum>=PagesLen) {startPage=0;endPage=PagesLen-1}
else if (nowPage<PageNum_2){startPage=0;endPage=PagesLen-1>PageNum?PageNum:PagesLen-1}//首页
else {startPage=nowPage+PageNum_3>=PagesLen?PagesLen-PageNum-1: nowPage-PageNum_2+1;var t=startPage+PageNum;endPage=t>PagesLen?PagesLen-1:t}
for (var i=startPage;i<=endPage;i++){
 if (i==nowPage)strC+='<a href="###" style="color:red;font-weight:700;" onclick="upPage('+i+')">'+(i+1)+'</a> '
 else strC+='<a href="###" onclick="upPage('+i+')">'+(i+1)+'</a> '
}
strE=' <a href="###" onclick="upPage('+(PagesLen-1)+')">尾页</a>  '
//strEinput=' <input id="fenyeshuru" value="" type="text" size=3/><a href="###" onclick="upPage('+(document.getElementById("fenyeshuru")==null?0:(document.getElementById("fenyeshuru").value-1))+')">跳转到</a> '
strE2=nowPage+1+"/"+PagesLen+"页"+"  共"+j+"条"
document.getElementById("fengye").innerHTML=strS+strC+strE+strE2//+strEinput
}</script>
  </body>
</html>
JavaScript分页数据库

解决方案 »

  1.   

    放在table里 设置td的样式试试
      

  2.   

    你可不可以说的详细一点，是吧js放table里吗？还有样式应该设计成什么样？
      

  3.   

    table和 td全部用百分比这有问题吧！ 你设定固定宽度 用html查看工具看看吧~~ 应该是样式问题了
      

  4.   

    你的td的宽设的有问题，你的table设的是80%，这是按照外围包table的标签的80%宽，而你设td的时候，td的宽度是基于table的，所以你td的宽要设成25%.
      

  5.   

    用js分页的话可以参考下我的开源项目
    http://blog.csdn.net/shadowsick
    里面就是使用js ajax分页效果
      

  6.   

    这个是表格布局的问题，你使用两个table，cellspacing和cellpadding的值又不一样，用比较简单的修改就是，只使用一个table，里面使用两个<tr>，第一个<tr>是标题，第二个<tr>是遍历出来的值，还有编码不规范的地方就是JS脚本应该放在head标签里面，在分页上我还有一个问题就是，遍历出来的页数1  2  3.....如果页数很多的时候怎么控制？