How to hide a table row or result if checkbox is checked AND if 0 result/count-CodePudding

I have this counter for word occurrence in the textarea. The problem is, I have a lot of items in the table, and so it can be distracting to include the zero results.

So what I'm hoping to achieve is, if the user checks the checkbox, it will not show the zero results anymore (preferably the whole row)..

Please see the code so far:

let textarea = $('#textarea3');
textarea.on('keyup', _ => counting());
function counting() {
    var searchText = $('#textarea3').val();

    let words = [];
    words['1 sample'] = '#one';
    words['2 sample'] = '#two';
    words['3 sample'] = '#three';
    words['4 sample'] = '#four';
    words['5 sample'] = '#five';
    words['6 sample'] = '#six';

    for (const word in words) {
        var outputDiv = $(words[word]);
        outputDiv.empty();
        let count = searchText.split(word).length - 1;
        searchText = searchText.replaceAll(word,'');
        outputDiv.append('<a>'   count   '</a>');
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="checkbox">
<label> Don't show zero results</label><br>
<button onclick="counting();">Count</button>

<table>
    <thead>
        <tr>
            <th scope="col">Items</th>
            <th scope="col">Count</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1 sample</td>
            <td><a id="one"></a></td>
        </tr>
        <tr>
            <td>2 sample</td>
            <td><a id="two"></a></td>
        </tr>
        <tr>
            <td>3 sample</td>
            <td><a id="three"></a></td>
        </tr>
        <tr>
            <td>4 sample</td>
            <td><a id="four"></a></td>
        </tr>
        <tr>
            <td>5 sample</td>
            <td><a id="five"></a></td>
        </tr>
        <tr>
            <td>6 sample</td>
           <td><a id="six"></a></td>
        </tr>
    </tbody>
</table>

<textarea id="textarea3" rows="5">
1 sample
2 sample
3 sample
5 sample
</textarea>

If the checkbox isn't checked, it should function as is and still show all results.

I've seen this post but I'm not really sure how to implement it to my own project. Show or hide table row if checkbox is checked

Thank you in advance for any help.

CodePudding user response：

Consider the following.

$(function() {
  var textarea = $('#textarea3');
  var words = [];
  $("table tbody tr").each(function(i, row) {
    words.push({
      term: $("td:eq(0)", row).text().trim(),
      rel: "#"   $("a", row).attr("id"),
      count: 0
    });
  });

  function count() {
    var searchText = textarea.val();
    $.each(words, function(i, word) {
      if (searchText.indexOf(word.term) >= 0) {
        var re = new RegExp('('   word.term   ')', 'gi');
        word.count = searchText.match(re).length;
        $(word.rel).html(word.count);
      } else {
        word.count = 0;
        if (!$("#noShowZero").is(":checked")) {
          $(word.rel).html(word.count);
        } else {
          $(word.rel).html("");
        }
      }
    });
  }

  textarea.keyup(count);

  $("#count-btn, #noShowZero").click(count);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input id="noShowZero" type="checkbox">
<label> Don't show zero results</label><br>
<button id="count-btn">Count</button>

<table>
  <thead>
    <tr>
      <th scope="col">Items</th>
      <th scope="col">Count</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1 sample</td>
      <td>
        <a id="one"></a>
      </td>
    </tr>
    <tr>
      <td>2 sample</td>
      <td>
        <a id="two"></a>
      </td>
    </tr>
    <tr>
      <td>3 sample</td>
      <td>
        <a id="three"></a>
      </td>
    </tr>
    <tr>
      <td>4 sample</td>
      <td>
        <a id="four"></a>
      </td>
    </tr>
    <tr>
      <td>5 sample</td>
      <td>
        <a id="five"></a>
      </td>
    </tr>
    <tr>
      <td>6 sample</td>
      <td>
        <a id="six"></a>
      </td>
    </tr>
  </tbody>
</table>

<textarea id="textarea3" rows="5">
1 sample
2 sample
3 sample
5 sample
</textarea>

When the User:

Enters text in the textbox
Clicks the checkbox
Clicks the Button

then count function is executed.

Count will review all the words and look for specific keywords. A count of them is also retained, as well as element relationship to show that count.

Using Regular Expressions, we can search for the words in the text and count them using .match(). It returns an Array of the matches. You could also use .replace(), to remove them.