How to hide table rows if Id = id

Question

I have a table here that I am trying to hide table row if the patient ID = patient ID. The table is loaded dynamically with XML. I will provide an example here.

<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>

So the rows where id = 1 and where id = 3 both have multiple rows. I want to only display one row and hide the other 3 unless i double click the row then it will display the 2,3,4,5 rows etc.

so this will be the end result:

<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>

and when you double click the row it will switch the css to display the hidden rows.

Answer 1

1. Use JavaScript to iterate over all rows in the table. If any have the same ID as a previous row then set the style to display: 'none' .

2. Add an event listener to each row that listens for double clicks. On a double click check the row's next sibling. If it has the same ID as the current row then set its style to 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>