Only getElementById works with code...getElementbyClassName and document.querySelectorAll aren't working

49 Views Asked by At

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

There are 0 best solutions below