title: Showing and Hiding Table Rows Based Off Alphabet Buttons
body: <p>I have a table with a lot of rows in it, and I want to give users the ability to click an 'A' button and all the results that start with 'A' are displayed. They could do the same for every letter. This is what I've come up with so far:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;input type="button" id="aSort" value="A" onclick="alphaSort(this.value);"&gt;
      &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;td&gt;Title&lt;/td&gt;
              &lt;td&gt;Description&lt;/td&gt;
              &lt;td&gt;Active&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;td name="title"&gt;Apple&lt;/td&gt;
              &lt;td&gt;It's a fruit&lt;/td&gt;
              &lt;td&gt;Active&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td name="title"&gt;Pear&lt;/td&gt;
              &lt;td&gt;It's also fruit&lt;/td&gt;
              &lt;td&gt;No&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>function alphaSort(val) {
      //pseudocode
      var $rows = $('td[name=title]');
      $rows.forEach(function(e) {
          if(e.innerText == val + '%') {
              e.closest('tr').show();
          } else {
              e.closest('tr').hide();
          }
      }
  }
  </code></pre>
  
  <p>So with what I have here, the idea is if the user clicked the button only the <code>Apple</code> row would show. Ideally the function would be case insensitive. Could someone help me with how to properly iterate through all the table rows efficiently and compare the value stored in the <code>title</code> row? </p>