Question

每个tbody的第一行是行标题（包含列名称）。 其他每一个成功获得第1行的人都没有必要，并希望隐藏它们。

使用的课程：

toprowHeader =包含每个列名称的第一行

recordsRow =保存其他记录详细信息

现在它显示如下：

--------------------------------------------
| MessageID  |  Sender   | Message         |
--------------------------------------------
|         1  | admin     |my admin message |
--------------------------------------------
| MessageID  |  Sender   | Message         |
--------------------------------------------
|         2  | sender1   |reply to admin   |

以下是我想要实现的示例结构：

--------------------------------------------
| MessageID  |  Sender   | Message         |
--------------------------------------------
|         1  | admin     |my admin message |
|         2  | sender1   |reply to admin   |

虽然我有一些选项可以让它更容易，但要求说每条记录都应该在 tbody

中

这是我的样本表结构：

<table class="gridtable">
    <tbody>
            <tr class="toprowHeader" >
                <td class="">...</td>
            </tr>
            <tr class="recordsRow " >
                <td class="">...</td>
            </tr>
            <tr class="recordsRow " >
                <td class="">...</td>
            </tr>               

    </tbody>
    <tbody>
            <tr class="toprowHeader">
                <td class="">...</td>
            </tr>
            <tr class="recordsRow ">
                <td class="">...</td>
            </tr>
            <tr class="recordsRow ">
                <td class="">...</td>
            </tr>               
    </tbody>    
</table>

增加了要求：

你们很多人质疑上面的表结构，但主要原因是我将它放在单独的tbody中因为我还有一个按钮可以将第一个tbody移动到表格的底部/最后一个。

我使用PHP来显示记录

Answer 1

请参阅下面的输出，使用此

根据您的要求，它将隐藏除第一个以外的所有toprowHeader

＆＃13;

                $('tr.toprowHeader:gt(0)').hide();
                $('table').append($('tbody:eq(0)'));
                console.log($('tbody:eq(0)'));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="gridtable">
    <tbody>
            <tr class="toprowHeader" >
                <td class="">title 1</td>
            </tr>
            <tr class="recordsRow " >
                <td class="">record1</td>
            </tr>
            <tr class="recordsRow " >
                <td class="">record1</td>
            </tr>               

    </tbody>
    <tbody>
            <tr class="toprowHeader">
                <td class="">title2</td>
            </tr>
            <tr class="recordsRow ">
                <td class="">record2</td>
            </tr>
            <tr class="recordsRow ">
                <td class="">record2</td>
            </tr>               
    </tbody> 
    <tbody>
            <tr class="toprowHeader">
                <td class="">title3</td>
            </tr>
            <tr class="recordsRow ">
                <td class="">record3</td>
            </tr>
            <tr class="recordsRow ">
                <td class="">record3</td>
            </tr>               
    </tbody> 
    <tbody>
            <tr class="toprowHeader">
                <td class="">title4</td>
            </tr>
            <tr class="recordsRow ">
                <td class="">record4</td>
            </tr>
            <tr class="recordsRow ">
                <td class="">record4</td>
            </tr>               
    </tbody> 
   <tbody>
            <tr class="toprowHeader">
                <td class="">title5</td>
            </tr>
            <tr class="recordsRow ">
                <td class="">record5</td>
            </tr>
            <tr class="recordsRow ">
                <td class="">record5</td>
            </tr>               
    </tbody> 
  <tbody>
            <tr class="toprowHeader">
                <td class="">title6</td>
            </tr>
            <tr class="recordsRow ">
                <td class="">record6</td>
            </tr>
            <tr class="recordsRow ">
                <td class="">record6</td>
            </tr>               
    </tbody>    
<tbody>
            <tr class="toprowHeader">
                <td class="">title7</td>
            </tr>
            <tr class="recordsRow ">
                <td class="">record7</td>
            </tr>
            <tr class="recordsRow ">
                <td class="">record7</td>
            </tr>               
    </tbody> 
</table>

＆＃13;

Answer 2

您可以使用CSS，如下所示：

＆＃13;

tbody:not(:first-child) .toprowHeader{
  display: none;
}

＆＃13;

<table class="gridtable">
  <tbody>
    <tr class="toprowHeader">
      <td>Title</td>
    </tr>
    <tr class="recordsRow ">
      <td>Record</td>
    </tr>
    <tr class="recordsRow ">
      <td>Record</td>
    </tr>
  </tbody>
  <tbody>
    <tr class="toprowHeader">
      <td>Title</td>
    </tr>
    <tr class="recordsRow ">
      <td>Record</td>
    </tr>
    <tr class="recordsRow ">
      <td>Record</td>
    </tr>
  </tbody>
</table>

＆＃13;

顺便说一句，您应该尝试修改脚本以省略额外的标题（无论哪个生成它），并在<thead>

中包含一个标题行

表：仅显示表tbody的第一行。如何隐藏后续的第1行？

2 个答案: