1

我在这里有一个表格，如果患者 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 以显示隐藏的行。

4

1 回答 1

0

  1. 使用 JavaScript 遍历表中的所有行。如果任何具有与前一行相同的 ID，则将样式设置为display: 'none'.

  2. 为每行添加一个事件侦听器来侦听双击。双击检查该行的下一个兄弟。如果它与当前行具有相同的 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>

于 2019-07-22T23:25:04.373 回答