如果 Id = id 如何隐藏表格行答案

【问题标题】：How to hide table rows if Id = id如果 Id = id 如何隐藏表格行
【发布时间】：2019-07-23 07:25:04
【问题描述】：

我在这里有一个表格，如果患者 ID = 患者 ID，我试图隐藏表格行。该表使用 XML 动态加载。我将在这里提供一个示例。

<table class="table">
    <thead>
        <tr>
            <td>Patient ID</td>
            <td>Name</td>
            <td>Reason for visit</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Christian</td>
            <td>Cold</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Christian</td>
            <td>Checkup</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Suzy</td>
            <td>Cold</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Cold</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Blood Test</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Mary</td>
            <td>Ankle</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Alex</td>
            <td>Cold</td>
        </tr>
    </tbody>
</table>

所以 id = 1 和 id = 3 的行都有多行。我只想显示一行并隐藏其他 3 行，除非我双击该行然后它将显示 2、3、4、5 行等。

所以这将是最终结果：

<table class="table">
    <thead>
        <tr>
            <td>Patient ID</td>
            <td>Name</td>
            <td>Reason for visit</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Christian</td>
            <td>Cold</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Suzy</td>
            <td>Cold</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John</td>
            <td>Cold</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Mary</td>
            <td>Ankle</td>
        </tr>
        <tr>
            <td>5</td>
            <td>Alex</td>
            <td>Cold</td>
        </tr>


    </tbody>
</table>

当你双击该行时，它会切换 css 以显示隐藏的行。

【问题讨论】：

到目前为止你尝试了什么？
我只能切换 .hide 的 css 类（显示：无），但无法对 tr 进行动态分组

标签： javascript html css

【解决方案1】：

使用 JavaScript 遍历表中的所有行。如果有的话与上一行相同的 ID，然后将样式设置为 display: 'none'。
为每一行添加一个事件监听器来监听双击。双击检查该行的下一个兄弟。如果它与当前行具有相同的 ID，则将其样式设置为 display:'table-cell'。

    var ids = [],
        rows = document.querySelectorAll( '.table tr' )

    Array.from( rows ).forEach( row => {
        var rowID = row.querySelector( 'td:first-child' ).innerHTML
        if ( !ids.includes( rowID ) )
            ids.push( rowID )
        else
            row.style.display = 'none'

        row.addEventListener( 'dblclick', () => {
            var next = row.nextElementSibling,
                nextID = ( next ? next.querySelector( 'td:first-child' ).innerHTML : null )
            if ( nextID = rowID )
                next.style.display = 'table-row'
        } );
    } )

    <table class="table">
        <thead>
            <tr>
                <td>Patient ID</td>
                <td>Name</td>
                <td>Reason for visit</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Christian</td>
                <td>Cold</td>
            </tr>
            <tr>
                <td>1</td>
                <td>Christian</td>
                <td>Checkup</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Suzy</td>
                <td>Cold</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
                <td>Cold</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
                <td>Blood Test</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Mary</td>
                <td>Ankle</td>
            </tr>
            <tr>
                <td>5</td>
                <td>Alex</td>
                <td>Cold</td>
            </tr>
        </tbody>
    </table>

【讨论】：