Toggle Row if does not match A B in javascript

Question

I'm trying to use javascript to hide all rows that don't match AB, so if it's in column BB, BA or AA, I'm trying to hide these columns. All my attempts failed

My attempt

And my javascript

$(document).ready(function () {
  $("#btn-only-ab").click(function () {
    $("tr").each(function (column, td) {
      var cellText = $(this).html();
      if (cellText === ["b", "b"] || ["b", "a"] || ["a", "a"]) $(td).toggle();
      console.log(cellText);
    });
  });
});

user_1319392 · Answer

You were trying to iterate through table rows without understanding how callback functions work, that's what caused the confusion. The function you pass inside $("tr".each()) is a function that is going to be applied to every element on your page. It doesn't on itself iterate through the cells of each row, it is merely an argument passed inside .each() to be used for every element found by .each(). Try to look up the expected arguments for the callback function here: the first one represents the index of the element inside this iteration, and the second one represents the actual element we're working with. So you're going to need another .each() for iterating through the elements, something like that :

$(document).ready(function () {
  $("#btn-only-ab").click(function () {
    $("tr").each(function (index, tr) {
      let tds = $(tr).children();
      tds.each(function(i, td) { 
        // do something with each cell
      });
    });
  });
});

So now that we have the callbacks figured out, there are a few more issues to address. First, .html() will return you the contents plus the tags, so instead it's better to use .text() which will give you just the text inside. Second, you should look up array equality checks in javascript, because the way you compared the values would not give you the result you want. So instead I re-wrote that part of code as comparison of two strings, but if you want to keep the array just write it differently: (below is the code that I put inside the callback function for )

  let tds = $(tr).children();
  let cellText = "";
  tds.each(function(i, td) { 
     cellText = cellText + ($(td).text());
  });

And here is a working demo (I left as much of your original code as possible, and it accomplishes your task, even though I think it still can be simplified more, for example, the .text() function can potentially be called inside the itself to get all the text from all the children):

$(document).ready(function () {
  $("#btn-only-ab").click(function () {
    $("tr").each(function (index, tr) {
      let tds = $(tr).children();
      let cellText = "";
      tds.each(function(i, td) { 
        cellText = cellText + ($(td).text());
      });
      if (cellText === "bb" || cellText === "ba"|| cellText === "aa") $(tr).toggle();
    });
  });
});

Toggle Row if does not match A B in javascript

1 Answers