我只想在我的表格中显示 3 个表格行，直到我悬停，然后我希望它全部显示

Posted 2023-03-06

【中文标题】我只想在我的表格中显示 3 个表格行，直到我悬停，然后我希望它全部显示

【英文标题】：I only want to display 3 table rows in my table until I hover, then I want it to display them all

【发布时间】：2014-03-21 10:13:29

【问题描述】：

我一直在寻找解决这个问题的方法，但到目前为止没有任何效果。

我只想在我的表格中显示 3 个表格行，直到我悬停，然后我只想让它全部显示：

我的 html：

<div id="CancelTable">
    <table id="tablecancel" >
        <colgroup>
            <col span="1" style="width: 850px;" />
            <col span="1" style="width: 850px;" />
        </colgroup>
        <tr>
            <td>Start Date to End Date</td>
            <td>Cancel</td>
            <td>Accept(True)/Decline(False)</td>
        </tr>
        <% Set objDBConn=S erver.CreateObject( "ADODB.Connection") objDBConn.Open "Provider=sqloledb;Data Source=*******;Initial Catalog=******;User ID=Byron;Password=Pass;" Set objDBCommand=S erver.CreateObject( "ADODB.Command") objDBCommand.ActiveConnection=o bjDBConn objDBCommand.CommandText="****" objDBCommand.CommandType=a dCmdStoredProc Set objDBRS=S erver.CreateObject( "ADODB.RecordSet") objDBRS.open objDBCommand,,adOpenForwardOnly Do until objDBRS.eof %>
            <tr>
                <td class="Column4Table">(
                    <%response.Write(objDBRS(1))%>) to (
                        <%response.Write(objDBRS(2))%>)</td>
                <td class="Column4Table">
                    <input type="checkbox" name="all">
                </td>
                <td class="Column4Table">
                    <%response.Write(objDBRS(3))%>
                </td>
            </tr>
            <% a=a+1 %>
                <%objDBRS.movenext Loop Set objDBCommand=nothing objDBConn.Close Set objDBConn=nothing %>
    </table>
    <div id="SelectAllSubmit">
        <div id="SelectAll"> <strong><i>Submit</i></strong>

        </div>
        <div id="Div1">
            <div id="p6"><span id="Span1">Select all</span>

            </div>
            <input type="checkbox" onclick="toggle(this)" />
            <br />
            <div id="buttonsubmit6" onclick="RowRemove();"> <strong><i>Submit</i></strong>

            </div>
        </div>
    </div>
</div>

Fiddle

【问题讨论】：

jsFiddle 不支持 ASP 标签。

【参考方案1】：

这是一种方法：

tr 
    display: none;


tr:nth-child(1),
tr:nth-child(2),
tr:nth-child(3) 
    display: table-row;


table:hover tr 
    display: table-row;

DEMO

【讨论】：

谢谢！这工作得很好！非常感谢:)