Question

假设我有一个表格，其中td是动态生成的

   <table>
   <tr>
      <td>Sample A </td>
      <td>Sample B </td>
      <td>Sample C </td>
      <td>Sample D </td>
      <td>Sample E </td>
   </tr>
  </table>

其中样品A，B，C，D，E动态生成，也有F，G，H等。

现在我想只显示5条记录，而不是全部。无论记录是什么，我只想显示5条记录

任何人都可以帮我编写javascript代码，其中第6列将自动隐藏并仅显示5个。

请有人帮助我。

Answer 1

我建议使用jquery。然后它看起来像这样

<script>
    var cols = $("#myRow").children("td");
    foreach...
</script>
<table>
   <tr id="myRow">
      <td>Sample A </td>
      <td>Sample B </td>
      <td>Sample C </td>
      <td>Sample D </td>
      <td>Sample E </td>
   </tr>
  </table>

看看你能否弄清楚其余部分：）

Answer 2

我假设你没有使用jQuery：

var cellz = document.getElementById('thistable').rows[0].cells;
    for(i=5; i < cellz.length; i++){
      cellz[i].style.display = 'none';
    }

将所有单元格隐藏在第一个单元格之外5.收集数组中的单元格，然后我们循环通过数组并隐藏那些5 +的单元格。

我选择5来满足您的需求。

这里应该是你的代码

   <table id="thistable">
     <tr>
       <td>Sample A </td>
       <td>Sample B </td>
       <td>Sample C </td>
       <td>Sample D </td>
       <td>Sample E </td>
     </tr>
   </table>


  <script type="text/javascript">
     // hide td's 5+
     var cellz = document.getElementById('thistable').rows[0].cells;
       for(i=5; i < cellz.length; i++){
       cellz[i].style.display = 'none';
      }
  </script>

Answer 3

尝试使用jQuery :gt() Selector：

$("table tr").find("td:gt(4), th:gt(4)").hide();
//It will find td and th elements in table at index greater than 4 (column 6, column 7, ...), then hide them

Answer 4

如果您不介意放弃对旧浏览器的支持，可以使用纯CSS3解决方案：

http://jsfiddle.net/nwj6S/

table#target tr > td:nth-child(n+6) {
    display:none;
}

根据此compatible table，这将删除IE＆lt; = 8。

使用javascript获取表的有限列数

4 个答案: