title: Hide rows in table B which already appear in table A
body: <p>Using this code :</p>
  
  <pre>
  
      var table1 = $('#TableA').find('td:eq(1)').text();
  
      var table2 = $("#TableB tr:gt(0)");
  
      table2.each(function (i) {
          var tds = $(this).children('td');
          var type= +tds.eq(0).text();
          var price = +tds.eq(1).text();
          if (price == table1) {
              var myTable = table2.filter(function () {
                  var tds = $(this).children('td');
  
              })
              myTable.add(this).hide()
          }
      })
  
  </pre>
  
  <p>My Html Page Structure</p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;table id="TableA"&gt;
          &lt;tr&gt;
              &lt;th&gt;Type&lt;/th&gt;
              &lt;th&gt;Price&lt;/th&gt;
              &lt;th&gt;Quantity&lt;/th&gt;
              &lt;th&gt;Ref No&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Mouse&lt;/td&gt;
              &lt;td&gt;50&lt;/td&gt;
              &lt;td&gt;6&lt;/td&gt;
              &lt;td&gt;#101255&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Speaker&lt;/td&gt;
              &lt;td&gt;300&lt;/td&gt;
              &lt;td&gt;6&lt;/td&gt;
              &lt;td&gt;#21165&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;table id="TableB"&gt;
          &lt;tr&gt;
              &lt;th&gt;Type&lt;/th&gt;
              &lt;th&gt;Price&lt;/th&gt;
              &lt;th&gt;Quantity&lt;/th&gt;
              &lt;th&gt;Ref No&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Mouse&lt;/td&gt;
              &lt;td&gt;50&lt;/td&gt;
              &lt;td&gt;6&lt;/td&gt;
              &lt;td&gt;#101255&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Speaker&lt;/td&gt;
              &lt;td&gt;300&lt;/td&gt;
              &lt;td&gt;6&lt;/td&gt;
              &lt;td&gt;#21165&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;Keyboard&lt;/td&gt;
              &lt;td&gt;150&lt;/td&gt;
              &lt;td&gt;7&lt;/td&gt;
              &lt;td&gt;#31234&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><em>"The second table in the images is the Table B"</em></p>
  
  <p>My Table B changes from this :
  <a href="http://i.stack.imgur.com/l3Zft.png" rel="nofollow">Before</a></p>
  
  <p>To this : <a href="http://i.stack.imgur.com/9F3sQ.png" rel="nofollow">After</a></p>
  
  <p>Now my problem is, only one row is hidden. The row, where "speaker" is, is still displayed. I know that I must use a loop for this, but I don't where to implement the loop and how. I'm a newbie programmer and I know that I need more practice. Please Help Thank you in advance</p>