title: how to merge 2 rows together WITH 2 rows in html table?
body: <p>I am not so good in English, to express myself, so I show it with examples to you!</p>
  
  <p>Here is my HTML table with code:</p>
  
  <pre><code>&lt;table border="1"&gt;
      &lt;tr id="tr1_1"&gt;
          &lt;td rowspan="2"&gt;1&lt;/td&gt;
          &lt;td&gt;tr1.1 td2&lt;/td&gt;
          &lt;td&gt;tr1.1 td3&lt;/td&gt;
          &lt;td rowspan="2"&gt;
              &lt;a href="#" class="move up"&gt;up&lt;/a&gt;/
              &lt;a href="#" class="move down"&gt;down&lt;/a&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="tr1_2"&gt;
          &lt;td&gt;tr1.2 td2&lt;/td&gt;
          &lt;td&gt;td1.2 td3&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr id="tr2_1"&gt;
          &lt;td rowspan="2"&gt;2&lt;/td&gt;
          &lt;td&gt;tr2.1 td2&lt;/td&gt;
          &lt;td&gt;tr2.1 td3&lt;/td&gt;
          &lt;td rowspan="2"&gt;
              &lt;a href="#" class="move up"&gt;up&lt;/a&gt;/
              &lt;a href="#" class="move down"&gt;down&lt;/a&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="tr2_2"&gt;
          &lt;td&gt;tr2.2 td2&lt;/td&gt;
          &lt;td&gt;td2.2 td3&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>(You can see the result <a href="http://jsfiddle.net/UQz8u/" rel="nofollow">here</a>)</p>
  
  <p>For example, if I click on the second two rows' "up" link, the result should be this:</p>
  
  <pre><code>&lt;table border="1"&gt;
      &lt;tr id="tr2_1"&gt;
          &lt;td rowspan="2"&gt;2&lt;/td&gt;
          &lt;td&gt;tr2.1 td2&lt;/td&gt;
          &lt;td&gt;tr2.1 td3&lt;/td&gt;
          &lt;td rowspan="2"&gt;
              &lt;a href="#" class="move up"&gt;up&lt;/a&gt;/
              &lt;a href="#" class="move down"&gt;down&lt;/a&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="tr2_2"&gt;
          &lt;td&gt;tr2.2 td2&lt;/td&gt;
          &lt;td&gt;td2.2 td3&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr id="tr1_1"&gt;
          &lt;td rowspan="2"&gt;1&lt;/td&gt;
          &lt;td&gt;tr1.1 td2&lt;/td&gt;
          &lt;td&gt;tr1.1 td3&lt;/td&gt;
          &lt;td rowspan="2"&gt;
              &lt;a href="#" class="move up"&gt;up&lt;/a&gt;/
              &lt;a href="#" class="move down"&gt;down&lt;/a&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr id="tr1_2"&gt;
          &lt;td&gt;tr1.2 td2&lt;/td&gt;
          &lt;td&gt;td1.2 td3&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>(You can see the final result <a href="http://jsfiddle.net/88NND/" rel="nofollow">here</a>)</p>
  
  <p>So how could I do this? I know the <code>prev()</code> and <code>before()</code> methods in javascript, but it merge only 1 row with 1 row, but I want to merge 2 rows WITH 2 rows!
  I hope, someone can help me! Thank you!</p>