How can I merge these two into one function of Javascript?

Question

I am using the following code to allow users to search and filter a HTML table.

function searchFilter(event) {
  var filter = event.target.value.toUpperCase();
  var rows = document.querySelector("#filterTable tbody").rows;

  for (var i = 0; i < rows.length; i++) {
    var secondCol = rows[i].cells[1].textContent.toUpperCase();
    var thirdCol = rows[i].cells[2].textContent.toUpperCase();
    var fourthCol = rows[i].cells[3].textContent.toUpperCase();
    var sixthCol = rows[i].cells[5].textContent.toUpperCase();
    var seventhCol = rows[i].cells[6].textContent.toUpperCase();
    var eighthCol = rows[i].cells[7].textContent.toUpperCase();
    if (secondCol.indexOf(filter) > -1 || thirdCol.indexOf(filter) > -1 || fourthCol.indexOf(filter) > -1 || sixthCol.indexOf(filter) > -1 || seventhCol.indexOf(filter) > -1 || eighthCol.indexOf(filter) > -1) {
      rows[i].style.display = "";
    } else {
      rows[i].style.display = "none";
    }
  }
}

document.querySelector('#driverSearch').addEventListener('keyup', searchFilter, false);


  Chronology
  
    
  
  
    
      
        
          No.
          Year
          Grand Prix
          Circuit
          Race No.
          Constructor
          Chassis
          Engine
          Start
          Win margin
        
      
      
        
          1
          2007
           Canada
          Montreal
          6
          McLaren
          MP4-22
          Mercedes V8
          1
          4.343s
        
        
          2
          2007
           USA
          Indianapolis
          7
          McLaren
          MP4-22
          Mercedes V8
          1
          1.518s
        
        
          3
          2007
           Hungary
          Hungaroring
          11
          McLaren
          MP4-22
          Mercedes V8
          1
          0.715s
        
        
          4
          2007
           Japan
          Fuji
          15
          McLaren
          MP4-22
          Mercedes V8
          1
          8.377s
        
        
          5
          2008
           Australia
          Melbourne
          18
          McLaren
          MP4-23
          Mercedes V8
          1
          5.478s
        
        
          6
          2008
           Monaco
          Monte Carlo
          23
          McLaren
          MP4-23
          Mercedes V8
          3
          3.064s

In the third column I am having some trouble. This column contains both img tags and anchor tags. Within the img tags the source link contains date formats such as: /uploads/2018/09/Spain.png.

The second column of my table is a year column. When users filter the table by year every year works apart from 2018. Because every image was uploaded in 2018, if a user wants to filter the table to show only 2018 entries the table shows every row despite the year. For example, the year 2002 will show up when you search for 2018. I know why, it's because the 2018 in the url is being accounted for.

I need just the text from the anchor, which led me to the following code:

rows[0].cells[2].getElementsByTagName("a")[0].textContent

If I replace var thirdCol = rows[i].cells[2].textContent.toUpperCase();with

rows[0].cells[2].getElementsByTagName("a")[0].textContent

the 2018 problem goes away. If you search for 2018 only results with 2018 in the second column are shown. However, if you search for any text from the third column the filter returns no results at all.

So, can rows[0].cells[2].getElementsByTagName("a")[0].textContent be added to the initial function in anyway to make the two work together? Or is there another way for me to do this?

Andy · Accepted Answer

It would be slightly easier to iterate over the cell data and if there's no match (I'm using some to return a boolean if there's text in any cell that matches the filter) hide the row. That way you don't have to manually check each cell with its index.

// Cache the rows outside of the searchFilter function
const rows = document.querySelectorAll("#filterTable tr");

// Add a reset function that removes the hide class
// from all the rows
function reset() {
  rows.forEach(row => row.classList.remove('hide'));
}

function searchFilter(event) {

  const filter = event.target.value.toUpperCase();

  // If the string is empty reset
  if (!filter) {
    reset();
  } else {

    // Otherwise iterate over each row
    rows.forEach((row, i) => {

      // Grab all the cells from the row
      const cells = Array.from(row.querySelectorAll('td'));

      // Use `some` to check each text of the cell
      // (note you have to use `trim` to get rid
      // of whitespace otherwise an exact match won't be found
      const foundFilter = cells.some(cell => {
        const cellText = cell.textContent.trim().toUpperCase();
        return cellText === filter;
      });

      // If a match was found remove the hide class,
      // otherwise add it
      if (foundFilter) {
        row.classList.remove('hide');
      } else {
        row.classList.add('hide');
      }
    });
  }

}

document.querySelector('#driverSearch').addEventListener('keyup', searchFilter, false);

.hide { visibility: hidden; }


  Chronology
  
    
  
  
    
      
        
          No.
          Year
          Grand Prix
          Circuit
          Race No.
          Constructor
          Chassis
          Engine
          Start
          Win margin
        
      
      
        
          1
          2007
           Canada
          Montreal
          6
          McLaren
          MP4-22
          Mercedes V8
          1
          4.343s
        
        
          2
          2007
           USA
          Indianapolis
          7
          McLaren
          MP4-22
          Mercedes V8
          1
          1.518s
        
        
          3
          2007
           Hungary
          Hungaroring
          11
          McLaren
          MP4-22
          Mercedes V8
          1
          0.715s
        
        
          4
          2007
           Japan
          Fuji
          15
          McLaren
          MP4-22
          Mercedes V8
          1
          8.377s
        
        
          5
          2008
           Australia
          Melbourne
          18
          McLaren
          MP4-23
          Mercedes V8
          1
          5.478s
        
        
          6
          2008
           Monaco
          Monte Carlo
          23
          McLaren
          MP4-23
          Mercedes V8
          3
          3.064s

How can I merge these two into one function of Javascript?

Answers (2)

Related Questions