Create array of non hidden td rows-CodePudding

So I have a table where the users can filter out specific rows, by checking a checkbox. If a checkbox is selected then, some rows will get the hidden state.

I want to create a array with all the rows that isn't hidden, but I can't seem to get the state of the <td>.

The tables id is ftp_table and the rows I need the data from has the class name download. I tried to so something like this, to get the visibility value, but without any luck. The function is triggered after a hide row function has run.

function download_log() {
    var rows = document.getElementsByClassName("download");
    var log = [];
    for (var i = 0; i < rows.length; i  ) {
        // Check if item is hidden or not (create a if and push into array)
        console.log(getComputedStyle(rows[i]).visibility);
        // append new value to the array IF NOT HIDDEN
        log.push(rows.item(i).innerHTML);
    }
}

The output I get when i hide something is everything is visible?:

Here is a example of the table, where all info rows has been hidden:

<table  id="ftp_table">
   <tbody>
      <tr >
         <th>Log</th>
      </tr>
      <tr  hidden>
         <td >2021-10-06 12:38:15.946 INFO     [conftest:101] -------------- Global Fixture Setup Started --------------</td>
      </tr>
      <tr >
         <td >2021-10-06 12:38:16.009 DEBUG    [Geni:37] Initializing</td>
      </tr>
      <tr  hidden>
         <td >2021-10-06 12:38:16.059 INFO     [Wrapper:21] Downloading</td>
      </tr>
      <tr  hidden>
         <td >2021-10-06 12:38:16.061 INFO     [Handler:55] AV </td>
      </tr>
      <tr >
         <td >2021-10-06 12:38:16.063 DEBUG    [Session:84] GET'</td>
      </tr>
   </tbody>
</table>

CodePudding user response：

You could use the following selector :

document.querySelectorAll("#ftp_table tr:not([hidden]) td.download");

It will select the td.download elements in tr that are not hidden in your table.

var visibleTds = document.querySelectorAll("#ftp_table tr:not([hidden]) td.download");

var arr = [];

for(let i = 0; i < visibleTds.length; i  ){
  arr.push(visibleTds[i].innerText);
}

console.log(arr);

<table  id="ftp_table">
   <tbody>
      <tr >
         <th>Log</th>
      </tr>
      <tr  hidden>
         <td >2021-10-06 12:38:15.946 INFO     [conftest:101] -------------- Global Fixture Setup Started --------------</td>
      </tr>
      <tr >
         <td >2021-10-06 12:38:16.009 DEBUG    [Geni:37] Initializing</td>
      </tr>
      <tr  hidden>
         <td >2021-10-06 12:38:16.059 INFO     [Wrapper:21] Downloading</td>
      </tr>
      <tr  hidden>
         <td >2021-10-06 12:38:16.061 INFO     [Handler:55] AV </td>
      </tr>
      <tr >
         <td >2021-10-06 12:38:16.063 DEBUG    [Session:84] GET'</td>
      </tr>
   </tbody>
</table>

CodePudding user response：

Why don't you use classList instead of style props ?

Like :

rows[i].classList.contains("hidden")

CodePudding user response：

You can try with closest() and hasAttribute().

const arr = [];

const tds = document.querySelectorAll("td");

tds.forEach(td => {
    if (!td.closest("tr").hasAttribute("hidden")) {
        const text = td.textContent;
        arr.push(text);
    }
});

console.log(arr);

<table  id="ftp_table">
   <tbody>
      <tr >
         <th>Log</th>
      </tr>
      <tr  hidden>
         <td >2021-10-06 12:38:15.946 INFO     [conftest:101] -------------- Global Fixture Setup Started --------------</td>
      </tr>
      <tr >
         <td >2021-10-06 12:38:16.009 DEBUG    [Geni:37] Initializing</td>
      </tr>
      <tr  hidden>
         <td >2021-10-06 12:38:16.059 INFO     [Wrapper:21] Downloading</td>
      </tr>
      <tr  hidden>
         <td >2021-10-06 12:38:16.061 INFO     [Handler:55] AV </td>
      </tr>
      <tr >
         <td >2021-10-06 12:38:16.063 DEBUG    [Session:84] GET'</td>
      </tr>
   </tbody>
</table>