John Davidson

Message:

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.

---

My Answer:
To access only the rows that are currently displayed after the filter is applied, you can add a condition to check if the row's display property is not 'none' before calculating the sum. Here's an updated version of your sum function:

javascript
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++) {
if (table.rows[i].style.display !== 'none') {
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);
}
}
}


By adding the condition `if (table.rows[i].style.display !== 'none')`, you are only calculating the sum for the rows that are currently displayed on the table. This should give you the sum of the values in the rows that are visible after the filter is applied.