Javascript 如果Id=Id，如何隐藏表行

我这里有一个表，如果患者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.
基督教的
冷的
1.
基督教的
检查
2.
苏济
冷的
3.
约翰
冷的
3.
约翰
验血
4.
玛丽
踝关节
5.
亚历克斯
冷的

因此，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>

患者ID
名称
访问原因
1.
基督教的
冷的
2.
苏济
冷的
3.
约翰
冷的
4.
玛丽
踝关节
5.
亚历克斯
冷的

当您双击该行时，它将切换css以显示隐藏的行

使用JavaScript迭代表中的所有行。如果有的话 与前一行相同的ID，然后将样式设置为

display:'none'

将事件侦听器添加到侦听双击的每一行。双击时，检查行的下一个同级。如果其ID与当前行相同，则将其样式设置为

display:'table-cell'

var id=[]，
行=document.querySelectorAll（'.table tr'）
Array.from（行）.forEach（行=>{
var rowID=row.querySelector（'td:first child'）.innerHTML
如果（！ids.includes（rowID））
id.push（rowID）
其他的
row.style.display='none'
row.addEventListener（'dblclick'，（）=>{
var next=row.nextElementSibling，
nextID=（next？next.querySelector（'td:first child'）。innerHTML:null）
如果（nextID=rowID）
next.style.display='表行'
} );
}）

患者ID
名称
访问原因
1.
基督教的
冷的
1.
基督教的
检查
2.
苏济
冷的
3.
约翰
冷的
3.
约翰
验血
4.
玛丽
踝关节
5.
亚历克斯
冷的

使用JavaScript迭代表中的所有行。如果有的话 与前一行相同的ID，然后将样式设置为

display:'none'

将事件侦听器添加到侦听双击的每一行。双击时，检查行的下一个同级。如果其ID与当前行相同，则将其样式设置为

display:'table-cell'

var id=[]，
行=document.querySelectorAll（'.table tr'）
Array.from（行）.forEach（行=>{
var rowID=row.querySelector（'td:first child'）.innerHTML
如果（！ids.includes（rowID））
id.push（rowID）
其他的
row.style.display='none'
row.addEventListener（'dblclick'，（）=>{
var next=row.nextElementSibling，
nextID=（next？next.querySelector（'td:first child'）。innerHTML:null）
如果（nextID=rowID）
next.style.display='表行'
} );
}）

患者ID
名称
访问原因
1.
基督教的
冷的
1.
基督教的
检查
2.
苏济
冷的
3.
约翰
冷的
3.
约翰
验血
4.
玛丽
踝关节
5.
亚历克斯
冷的

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