如何只显示 table 的最后 20 列？

Question

所以我知道这可能是一个愚蠢的问题，但我为此浪费了很多时间，我无法做到这一点。
我有这个 table (class : responstable)，在它的 <td>@c</td> 中，我将显示我的数据库中的一些值。问题是我在那里存储了很多值，我有兴趣只显示 LAST 20 个值 -> 所以 only 最后 20 列

-（在我想要的值下也看到日期+时间）...

  <div class="tabel-val">
    <br><br>
    <table id= "myTable" style="width:100%" class="responstable">

    <tr  class="val">

        <th>&nbsp;&nbsp;value</th>
        @for((c,w)<- map){
        <td>@c</td>

         }
    </tr>
    <tr class="time">
        <th>&nbsp;&nbsp;time</th>
        @for(k <- timeList){
            <td> @k</td> 
         }
    </tr>
    <tr class="date">
        <th>&nbsp;&nbsp;date</th> 
        @for(q <- dateList){ 
        <td>@q </td>
        }
     </tr>

    </table>
    </div>

我尝试了一些东西：

 $("table td:gt(5)").hide(); //displays only the 5 values (val class) , no time and date ...

谢谢！

Answer 1

。首先对可用列进行计数。然后通过变量'iwish'决定从最后算起多少列。这是代码

            <table>
                <tbody>
                <tr>
                    <td>12</td>
                    <td>13</td>
                </tr>
                </tbody>

jquery

            var total = $('table tr td').length;
            var iwish = 1;
            $('table tr').find('td').hide().end().find('td:gt('+(total - iwish -1 )+')').show()

Answer 2

您可以 CSS 单独执行此操作 - 使用 :nth-last-child 选择器。

只需使用以下内容：

.responstable td{
    display: none;
}
.responstable td:nth-last-child(-n + 20) {
    display: table-cell;
}

这是一个 demo（我在其中显示一行的最后 3 列）

td {
  text-align: center;
  border: 1px solid black;
}
table {
  table-layout: fixed;
}
td {
  display: none;
}
td:nth-last-child(-n + 3) {
  display: table-cell;
}

<div class="tabel-val">
  <br>
  <br>
  <table id="myTable" style="width:100%" class="responstable">
    <tr class="val">
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
  </table>
</div>

Answer 3

这可以使用 :nth-last-child(n) selector 和波浪号 (~) selector 到 select 之后的所有对象来完成。

td{
    border:1px solid black;
    display:none;
}

td:nth-last-child(4) ~ td{
    display: initial;
}

此示例将仅显示单元格 a5 和 b5 之后的单元格（因为它们位于倒数第 4 个）。在您的情况下，您宁愿需要使用 td:nth-last-child(21) ~ td 来仅显示最后 20 个单元格。

<table>
    <tr>
        <td>a1</td>
        <td>a2</td>
        <td>a3</td>
        <td>a4</td>
        <td>a5</td>
        <td>a6</td>
        <td>a7</td>
        <td>a8</td>
    </tr>
     <tr>
        <td>b1</td>
        <td>b2</td>
        <td>b3</td>
        <td>b4</td>
        <td>b5</td>
        <td>b6</td>
        <td>b7</td>
        <td>b8</td>
    </tr>
</table>

这是一个用于演示的 JSFiddle http://jsfiddle.net/j2foq7hy/1/

Answer 4

td:nth-last-child(-n + 3) {
    display: table-cell;
}

如何只显示 table 的最后 20 列？

How can a display only the last 20 columns of a table?

html

css

jquery

html-table

multiple-columns

这是一个 demo（我在其中显示一行的最后 3 列）