How do I hide a table row if there is a null value or a specific value

I’m not much of a javascript coder, but I’m trying to write something to make my work a little easier…

I have a table of data. The third cell of the table (‘offersTable’) is a display flag, which will either be ‘Y’, ‘N’, or empty. The source for the table is incomplete, which is why sometimes the cell is empty (null).

I’m trying to write a small script that will iterate down through the table, and then set the row to hide if the value if the cell is either ‘N’ or null. That way, only rows which have a ‘Y’ remain.

Please can someone help me? I’m going out of my mind trying to work this one out!

Sorry, I should have included my code…

<table id="offersTable">
        <tr>
            <th onclick="sortTable(0)">Lender</th>
            <th onclick="sortTable(1)">Lender Code</th>
            <th onclick="sortTable(2)">Display</th>
            <th onclick="sortTable(3)">Loan Offered</th>
            <th onclick="sortTable(4)">Term Offered</th>
            <th onclick="sortTable(5)">Approval Probability</th>
            <th onclick="sortTable(6)">APR</th>
            <th onclick="sortTable(7)">Monthly Repayment</th>
            <th onclick="sortTable(8)">Total Repayable</th>
        </tr>
        <tr id="lender1">
            <td id="lender1Name"><script>document.getElementById("lender1Name").innerHTML = offers[0].lender_name;</script>
            </td>
            <td id="lender1Code"><script>document.getElementById("lender1Code").innerHTML = offers[0].lender_code;</script>
            </td>
            <td id="lender1Display"><script>document.getElementById("lender1Display").innerHTML = offers[0].display;</script>
            </td>
            <td id="lender1Value"><script>document.getElementById("lender1Value").innerHTML = offers[0].loan_offered;</script>
            </td>
            <td id="lender1Term"><script>document.getElementById("lender1Term").innerHTML = offers[0].term_offered;</script>
            </td>
            <td id="lender1AppProb"><script>document.getElementById("lender1AppProb").innerHTML = offers[0].approval_probability;</script>
            </td>
            <td id="lender1APR"><script>document.getElementById("lender1APR").innerHTML = offers[0].apr;</script>
            </td>
            <td id="lender1MonthlyRepay"><script>document.getElementById("lender1MonthlyRepay").innerHTML = offers[0].monthly_repayment;</script>
            </td>
            <td id="lender1TotalRepay"><script>document.getElementById("lender1TotalRepay").innerHTML = offers[0].total_repayment;</script>
            </td>
        </tr>
        <tr id="lender2">
            <td id="lender2Name"><script>document.getElementById("lender2Name").innerHTML = offers[1].lender_name;</script>
            </td>
            <td id="lender2Code"><script>document.getElementById("lender2Code").innerHTML = offers[1].lender_code;</script>
            </td>
            <td id="lender2Display"><script>document.getElementById("lender2Display").innerHTML = offers[1].display;</script>
            </td>
            <td id="lende2Value"><script>document.getElementById("lender2Value").innerHTML = offers[1].loan_offered;</script>
            </td>
            <td id="lender2Term"><script>document.getElementById("lender2Term").innerHTML = offers[1].term_offered;</script>
            </td>
            <td id="lender2AppProb"><script>document.getElementById("lender2AppProb").innerHTML = offers[1].approval_probability;</script>
            </td>
            <td id="lender2APR"><script>document.getElementById("lender2APR").innerHTML = offers[1].apr;</script>
            </td>
            <td id="lender2MonthlyRepay"><script>document.getElementById("lender2MonthlyRepay").innerHTML = offers[1].monthly_repayment;</script>
            </td>
            <td id="lender2TotalRepay"><script>document.getElementById("lender2TotalRepay").innerHTML = offers[1].total_repayment;</script>
            </td>
        </tr>
        <tr id="lender3">
            <td id="lender3Name"><script>document.getElementById("lender3Name").innerHTML = offers[2].lender_name;</script>
            </td>
            <td id="lender3Code"><script>document.getElementById("lender3Code").innerHTML = offers[2].lender_code;</script>
            </td>
            <td id="lender3Display"><script>document.getElementById("lender3Display").innerHTML = offers[2].display;</script>
            </td>
            <td id="lender3Value"><script>document.getElementById("lender3Value").innerHTML = offers[2].loan_offered;</script>
            </td>
            <td id="lender3Term"><script>document.getElementById("lender3Term").innerHTML = offers[2].term_offered;</script>
            </td>
            <td id="lender3AppProb"><script>document.getElementById("lender3AppProb").innerHTML = offers[2].approval_probability;</script>
            </td>
            <td id="lender3APR"><script>document.getElementById("lender3APR").innerHTML = offers[2].apr;</script>
            </td>
            <td id="lender3MonthlyRepay"><script>document.getElementById("lender3MonthlyRepay").innerHTML = offers[2].monthly_repayment;</script>
            </td>
            <td id="lender3TotalRepay"><script>document.getElementById("lender3TotalRepay").innerHTML = offers[2].total_repayment;</script>
            </td>
        </tr>
        <tr id="lender4">
            <td id="lender4Name"><script>document.getElementById("lender4Name").innerHTML = offers[3].lender_name;</script>
            </td>
            <td id="lender4Code"><script>document.getElementById("lender4Code").innerHTML = offers[3].lender_code;</script>
            </td>
            <td id="lender4Display"><script>document.getElementById("lender4Display").innerHTML = offers[3].display;</script>
            </td>
            <td id="lender4Value"><script>document.getElementById("lender4Value").innerHTML = offers[3].loan_offered;</script>
            </td>
            <td id="lender4Term"><script>document.getElementById("lender4Term").innerHTML = offers[3].term_offered;</script>
            </td>
            <td id="lender4AppProb"><script>document.getElementById("lender4AppProb").innerHTML = offers[3].approval_probability;</script>
            </td>
            <td id="lender4APR"><script>document.getElementById("lender4APR").innerHTML = offers[3].apr;</script>
            </td>
            <td id="lender4MonthlyRepay"><script>document.getElementById("lender4MonthlyRepay").innerHTML = offers[3].monthly_repayment;</script>
            </td>
            <td id="lender4TotalRepay"><script>document.getElementById("lender4TotalRepay").innerHTML = offers[3].total_repayment;</script>
            </td>
        </tr>
</table>

3 thoughts on “How do I hide a table row if there is a null value or a specific value”

  1. without seeing your code is difficult but i know this solution with js:

    for (i in document.querySelectorAll('td')) {
            if (document.querySelectorAll('td')[i].textContent == 'N' || document.querySelectorAll('td')[i].textContent == 'null' ) {
                document.querySelectorAll('td')[i].remove()
            }
        }
    

    i’m using "remove" only to demonstrate it but you can use style.property…

    Reply
  2. <table>
    <tr>
        <td>Info A 1</td> 
        <td>Info B 1</td>
        <td>Y</td>
    </tr>
    <tr>
        <td>Info A 2</td> 
        <td>Info B 2</td>
        <td>N</td>
    </tr>
    <tr>
        <td>Info A 3</td> 
        <td>Info B 3</td>
        <td>N</td>
    </tr>
    <tr>
        <td>Info A 4</td> 
        <td>Info B 4</td>
        <td>Y</td>
    </tr>
    <tr>
        <td>Info A 5</td> 
        <td>Info B 5</td>
        <td>N</td>
    </tr>
    </table>
    <script>
    function filterTable(table, cellIndex, filter) {
        for (var i = 0, tr; tr = table.rows[i]; i++) {
            var third_td = tr.cells[cellIndex];
            tr.style.display = third_td.innerText === filter ? '' : 'none';
        }
    }
    
    var tables = document.getElementsByTagName('table');
    if  (tables.length > 0) {
        var table = tables[0];
        filterTable(table, 2, 'Y');
    }
    </script>
    Reply

Leave a Comment