javascript - 使用javascript获取有限数量的表列

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+ 的 td。

我选择了 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() 选择器：

$("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;
}

根据此兼容表，这将删除 IE<=8。