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

Question

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>

Answer 1

 <table> <tr> <td>Header A</td> <td>Header B</td> <td>Filtered to</td> </tr> <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> <table> <tr> <td>Header A</td> <td>Header B</td> <td>Filtered to</td> </tr> <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>Y</td> </tr> <tr> <td>Info A 4</td> <td>Info B 4</td> <td>N</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 = 1, tr; tr = table.rows[i]; i++) { // skip first line var third_td = tr.cells[cellIndex]; tr.style.display = third_td.innerText === filter? '': 'none'; } } function filterAllTables(cellIndex, filter) { var tables = document.getElementsByTagName('table'); if (tables.length > 0) { for (var i = 0, table; table = tables[i]; i++) { filterTable(table, cellIndex, filter); } } } window.addEventListener('load', function () { filterAllTables(2, 'Y'); }); </script>

Answer 2

I would maybe try css: display: hidden; Also check out this website or research some before posting. https://salesforce.stackexchange.com/questions/122023/hide-html-table-rows-if-outputfield-is-null-or-0 Hope this helps!

Answer 3

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

Answer 4

I went with this option as it worked perfectly, operating in exactly the way that I wanted. Many thanks to René Datenschutz for the solution.

 <table> <tr> <td>Header A</td> <td>Header B</td> <td>Filtered to</td> </tr> <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> <table> <tr> <td>Header A</td> <td>Header B</td> <td>Filtered to</td> </tr> <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>Y</td> </tr> <tr> <td>Info A 4</td> <td>Info B 4</td> <td>N</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 = 1, tr; tr = table.rows[i]; i++) { // skip first line var third_td = tr.cells[cellIndex]; tr.style.display = third_td.innerText === filter? '': 'none'; } } function filterAllTables(cellIndex, filter) { var tables = document.getElementsByTagName('table'); if (tables.length > 0) { for (var i = 0, table; table = tables[i]; i++) { filterTable(table, cellIndex, filter); } } } window.addEventListener('load', function () { filterAllTables(2, 'Y'); }); </script>