How to access the display property of a row inside a html table-CodePudding

I have an html table populated by sql, in a php file something like this:

<table id='myTable'>
    <tr> <th>Name</th><th>Weight</th> </tr>
     <tbody id='budy'>
      <tr>
        <td> x </td><td> 3 kg</td>
      </tr>
      <tr>
        <td> y </td><td> 9 kg</td>
      </tr>
      <tr>
        <td> x </td><td> 1 kg</td>
      </tr>
       <tr>
        <td> x </td><td> 6 kg</td>
      </tr>
       <tr>
        <td> y </td><td> 7 kg</td>
      </tr>
      </tbody>
      </table>

And this filter function to search either the name or the weight across the table:

function doSearch() {
    var searchText = document.getElementById('filterInput').value;
    var targetTable = document.getElementById('myTable');
    var btn=document.getElementById("totalbtn");
    var targetTableColCount;
    document.getElementById("totalbtn").disabled=false;
    //Loop through table rows
    for (var rowIndex = 0; rowIndex < targetTable.rows.length; rowIndex   ) {
         var rowData = '';
         //Get column count from header row
          if (rowIndex == 0) {
              targetTableColCount = targetTable.rows.item(rowIndex).cells.length;
              continue; //do not execute further code for header row.
            }
           var rowCells = targetTable.rows.item(rowIndex).cells;
           for (var colIndex = 0; colIndex < 2; colIndex  ) {
                var cellText = '';

                if (targetTable.rows.item(rowIndex).cells.item(colIndex)) {                      
                    cellText = rowCells.item(colIndex)[(navigator.appName == 'Microsoft Internet 
                            Explorer')? "innerText" : "textContent"];
                 }
                   rowData  = cellText;
            }

             // Make search case insensitive.
            rowData = rowData.toLowerCase();
            searchText = searchText.toLowerCase();

            //If search term is not found in row data
            //then hide the row, else show
            if (rowData.indexOf(searchText) == -1)
                 targetTable.rows.item(rowIndex).style.display = 'none';
              else
                  targetTable.rows.item(rowIndex).style.display = 'table-row';
            }
        }

I understand the function, but i am not the one who programmed it, my question is how can i access just the rows left(which i believe have the html property 'display!= none') after the user input text in the text filter? i have tried with:

  function sum(){
      var buttoncal = document.getElementById("totalbtn");
      var table = document.getElementById("myTable");
      var sum=0;
      var temp;
     for(var i=1; i< table.rows.length; i  ){
          sum = sum   parseInt(table.rows[i].cells[2].innerHTML.slice(0,1));
          temp=table.rows[i].cells[4].innerHTML.slice(0,1)
          console.log(temp);
      }
    }

but so far i only get the sum of all rows, including the one with the "new" display property of 'none' instead of just adding the rows shown after the filter is used. Thanks for any advice to solve this.

CodePudding user response：

Your search function is already distinguishing between rows that are hidden (display="none") and rows that are display="table-row" so you can use that logic to do your sum:

function doSearch() {
  let sum = 0;

  // ...

  // Replace your display='none'/display='table-row' logic with:
  if (rowData.indexOf(searchText) == -1) {
    targetTable.rows.item(rowIndex).style.display = 'none';
  } else {
    targetTable.rows.item(rowIndex).style.display = 'table-row';
    sum  = parseInt( targetTable.rows.item(rowIndex).cells[1] );
  }
}

CodePudding user response：

You can remove row element instead setting display to none

if (rowData.indexOf(searchText) == -1)
   targetTable.rows.item(rowIndex).remove()
else
   targetTable.rows.item(rowIndex).style.display = 'table-row';

it will delete element from DOM, so you cant return it back