title: How can jQuery select Table Row group by Colum's value?
body: <p>I have a problem regarding jQuery selector, where I have a Table structure as below (<strong>HTML Portion</strong>), and there is a link in table column for click and move the Table Row "UP" and "Down" by using jQuery (<strong>jQuery Portion</strong>, reference from <a href="https://stackoverflow.com/questions/1569889/jquery-move-table-row/1569919#comment22056889_1569919">this post</a>).</p>
  
  <p><strong>jQuery Portion :</strong></p>
  
  <pre><code> $(".up,.down").click(function() {
      var row = $(this).parents("tr:first");
      if ($(this).is(".up")) {
          row.insertBefore(row.prev("tr:has(td)"));
      } else {
          row.insertAfter(row.next());
      }
  });
  </code></pre>
  
  <p><strong>HTML Portion :</strong></p>
  
  <pre><code> &lt;table cellspacing="0" border="0" id="Table1" style="text-align:center" &gt;
      &lt;tr&gt;
          &lt;th scope="col" width="80px"&gt;Column A&lt;/th&gt;&lt;th scope="col" width="80px"&gt;Column B&lt;/th&gt;&lt;th scope="col"&gt;&amp;nbsp;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;
                  &lt;span id="GridView1_ctl02_lbl1"&gt;A&lt;/span&gt;
              &lt;/td&gt;&lt;td&gt;
                  &lt;span id="GridView1_ctl02_lbl2"&gt;0&lt;/span&gt;
              &lt;/td&gt;&lt;td&gt;
                  &lt;a href="#" class="up"&gt;Up&lt;/a&gt; &lt;a href="#" class="down"&gt;Down&lt;/a&gt;
              &lt;/td&gt;
      &lt;/tr&gt;&lt;tr&gt;
          &lt;td&gt;
                  &lt;span id="GridView1_ctl03_lbl1"&gt;B&lt;/span&gt;
              &lt;/td&gt;&lt;td&gt;
                  &lt;span id="GridView1_ctl03_lbl2"&gt;2&lt;/span&gt;
              &lt;/td&gt;&lt;td&gt;
                  &lt;a href="#" class="up"&gt;Up&lt;/a&gt; &lt;a href="#" class="down"&gt;Down&lt;/a&gt;
              &lt;/td&gt;
      &lt;/tr&gt;&lt;tr&gt;
          &lt;td&gt;
                  &lt;span id="GridView1_ctl04_lbl1"&gt;C&lt;/span&gt;
              &lt;/td&gt;&lt;td&gt;
                  &lt;span id="GridView1_ctl04_lbl2"&gt;2&lt;/span&gt;
              &lt;/td&gt;&lt;td&gt;
              &lt;/td&gt;
      &lt;/tr&gt;&lt;tr&gt;
          &lt;td&gt;
                  &lt;span id="GridView1_ctl05_lbl1"&gt;D&lt;/span&gt;
              &lt;/td&gt;&lt;td&gt;
                  &lt;span id="GridView1_ctl05_lbl2"&gt;2&lt;/span&gt;
              &lt;/td&gt;&lt;td&gt;
              &lt;/td&gt;
      &lt;/tr&gt;&lt;tr&gt;
          &lt;td&gt;
                  &lt;span id="GridView1_ctl06_lbl1"&gt;E&lt;/span&gt;
              &lt;/td&gt;&lt;td&gt;
                  &lt;span id="GridView1_ctl06_lbl2"&gt;3&lt;/span&gt;
              &lt;/td&gt;&lt;td&gt;
                  &lt;a href="#" class="up"&gt;Up&lt;/a&gt; &lt;a href="#" class="down"&gt;Down&lt;/a&gt;
              &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I wanted the Row to be move "UP" and "Down" <strong>group by values in "Column B"</strong> (as per highlighted with red box") instead of ordinary row by row. Based on example of the diagram, the moving of rows should be move by the red boxes.</p>
  
  <p><img src="https://i.stack.imgur.com/LC1yc.jpg" alt="enter image description here"></p>
  
  <p>So my question is, how can I using jQuery selector to select rows group by value in "Column B"? which the onclick event was trigger on links ("Up" &amp; "Down") click.</p>
  
  <p>Thank you in advanced :)</p>