html table的thead和tbody列宽不一致问题

最近测试一个表翻页的javascript脚本的时候,发现html里引入了这个js以后,原来整齐的表,居然列的宽度全乱了,搞了半天才发现原来是js代码里的样式display属性赋值错了导致的。

期待的效果:

%title插图%num

实际的效果:

%title插图%num

测试代码如下:

<html>

<body onload="goPage(1,10)">

<h4>表分页测试:</h4>
<table border="1" id="idData">
<thead class="thead-1">
<tr>
  <th>姓名</th>
  <th>地址</th>
  <th>电话</th>
</tr>
</thead>
<tbody class="tbody-1">
<tr>
  <td>Alon Musk</td>
  <td>123444</td>
  <td>5333 435 424888</td>
  <tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</tr>
</tbody>
</table>


<script type="text/javascript">
function goPage(pno,psize){
    var tableData = document.getElementById("idData");
    var num = tableData.rows.length;//表格所有行数(所有记录数)
    console.log(num);
    var totalPage = 0;//总页数
    var pageSize = psize;//每页显示行数
    //总共分几页
    if(num/pageSize > parseInt(num/pageSize)){
        totalPage=parseInt(num/pageSize)+1;
      }else{
        totalPage=parseInt(num/pageSize);
      }
    var currentPage = pno;//当前页数
    var startRow = (currentPage - 1) * pageSize+1;//开始显示的行
      var endRow = currentPage * pageSize;//结束显示的行
      endRow = (endRow > num)? num : endRow; 
      console.log(endRow);
      //遍历所有数据行实现分页
    for(var i=1;i<(num+1);i++){
      var irow = tableData.rows[i-1];
      if(i>=startRow && i<=endRow){
        irow.style.display = "block";
      }else{
        irow.style.display = "none";
      }
    }
    var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
    if(currentPage>1){
      tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>";
      tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一页</a>"
    }else{
      tempStr += "首页";
      tempStr += "<上一页";
    }
    if(currentPage<totalPage){
      tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页></a>";
      tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>";
    }else{
      tempStr += "下一页>";
      tempStr += "尾页";
    }
    document.getElementById("pagination").innerHTML = tempStr;
  }
  </script>
</body>
</html>

第56行设置错了:

irow.style.display = "block";

当显示样式设置为display=block的时候,会把表的所有tr和td都显示成块,这样就会导致用colgroup给表的tr或者td单独设置的样式会变成全部tr,td都生效,表的各个字段的宽度也会成块状自动漂浮显示,只要把display属性改成display=table-row就正常了。

相关文章 推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注