The following code works when I use get ElementById, but won't work when I switch to querySelectorAll, querySelector, or getElementbyClassName.
The table ID is always BlockLayoutController and then a random string of digits, which is why I can't use getElementId (i.e., the table id changes every time).
The code I created from reading a bunch of other posts (my first time coding in java) hides cells in columns 2,3,4 if the number in cell 1 is less than 3.
(function() {
var tbl = document.getElementById ('BlockLayoutController1234'),
rows = tbl.tBodies[0].children, l = rows.length, i,
filter = function(cells) {
var values = [
parseInt(cells[0].firstChild.nodeValue.replace(/,/g,''),10),
parseFloat(cells[1].firstChild.nodeValue.replace(/,/g,'')),
parseFloat(cells[2].firstChild.nodeValue.replace(/,/g,''))
];
if( values[1] < 3) return false;
return true;
};
for( i=0; i<l; i++) {
if( !filter(rows[i].cells)) rows[i].cells[2].style.display = 'none';
if( !filter(rows[i].cells)) rows[i].cells[3].style.display = 'none';
if( !filter(rows[i].cells)) rows[i].cells[4].style.display = 'none';
}
})();
I have tried to replace
var tbl = document.getElementById ('BlockLayoutController1234')
with
var tbl = document.querySelectorAll ('div.QRatingBlockRow.TableContainer td')
var tbl = document.querySelector ('div.QRatingBlockRow.TableContainer td')
var tbl = document.getElementsbyClassName ('div.QRatingBlockRow.TableContainer td')
In a previous post, someone commented "If you don't want more than one element, don't use querySelectorAll", but I don't really know how to apply that info
This is the table I am trying to edit:
<div class="QRatingBlockRow TableContainer">
<table id="BlockLayoutController1234" class="block-table CondensedTab" border="0">
<tbody> <tr class="CondensedTabEvenRows">
<td class="TabularBody_LeftColumn" id="row_0" scope="row" headers="questionName">BH </td>
<td class="TabularBody_RightColumn" headers="group0 Count0 row_0">2</td>
<td class="TabularBody_RightColumn" headers="group0 avg0 row_0">3.74</td>
<td class="TabularBody_RightColumn" headers="group0 SD0 row_0">0.59</td>
<td class="TabularBody_RightColumn" headers="group0 Med0 row_0">4.00</td>
</tr></tbody> </table></div>