javascript - jquery - 如何将 td 移动到另一个 td

Question

我有一张这样的 table 。

<table>
    <tr>
        <td>A</td>
        <td><select id="B" name="B">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        </select>
        </td>
        <td>C</td>
        <td>D</td>
    </tr>
    <tr>
        <td>E</td>
        <td class="sample">F: will hide/show</td>
        <td class="sample">G: will hide/show</td>
        <td>H</td>
    </tr>
    <tr>
        <td>I</td>
        <td class="id1">J</td>
        <td class="id1">K</td>
        <td>L</td>
    </tr>
    <tr>
        <td>M</td>
        <td class="id2">N</td>
        <td class="id2">O</td>
        <td>P</td>
    </tr>
</table>

然后，每当我更改 <td>B 中的值时选择选项，<td>F和 <td>G会躲。。 然后它将向上移动到<td>下方...
<td>J & <td>K至 <td>F & <td>G ,
<td>N & <td>O至 <td>J & <td>K ,

如果 <td>F 则相反和 <td>G将显示.. 其他<td>会向下移动

这是我开始使用的 jquery。

$('select#B').change(function(event) {

          if (this.value == '2') {
                $(".sample").show();
          } else {
                $(".sample").hide();
          }
        });

http://jsfiddle.net/rucsh/40/

Answer 1

$('select#B').change(function(event) {

var clone = $('td.id1').clone();
var clone2 = $('td.id2').clone();

          if (this.value == '2') {
                $(".sample, td.id1, td.id2").show();
                $('.clone').remove();
          } else {
                $(".sample, td.id1, td.id2").hide();
                $(clone).insertAfter('.sample:last').addClass('clone');
                $(clone2).insertAfter('.id1:last').addClass('clone');
          }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>
    <tr>
        <td>A</td>
        <td><select id="B" name="B">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        </select>
        </td>
        <td>C</td>
        <td>D</td>
    </tr>
    <tr>
        <td>E</td>
        <td class="sample">F: will hide/show</td>
        <td class="sample">G: will hide/show</td>
        <td>H</td>
    </tr>
    <tr>
        <td>I</td>
        <td class="id1">J</td>
        <td class="id1">K</td>
        <td>L</td>
    </tr>
    <tr>
        <td>M</td>
        <td class="id2">N</td>
        <td class="id2">O</td>
        <td>P</td>
    </tr>
</table>