CODEWITHSUNDEEP
javascriptcssrowhide
Steve_G
Steve_G

Reputation: 3

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>

Upvotes: 0

Views: 2005

Answers (4)

Steve_G
Steve_G

Reputation: 3

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>

Upvotes: 0

Scriptkiddy1337
Scriptkiddy1337

Reputation: 791

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

Upvotes: 1

user14467340
user14467340

Reputation: 16

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

Upvotes: 0

Wyatt
Wyatt

Reputation: 21

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!

Upvotes: 0

Related Questions