javascript - 如何在不使用javascript更改表行的情况下，将表row1的表单值替换为表row2的表单值？

我正在尝试将row1中的表单值与row2的表单值交换，而不交换行。有人可以炫耀我用纯Javascript，香草JS或jQuery实现这一目标。我使表行变短了，只有两行，但实际的表由17行组成。请仔细查看第三个示例中的id和表单值。

如果未单击“向上”或“向下”按钮，则表格的形式如下：

   <form id="menuitems">
    <table class="toolbaritems">
       <tbody class="sortable">
       <tr id="row1">
          <td><button class="up_arrow">UP</button></td>
          <td><input value="1></td>
          <td><select><option="1" selected></option></select></td>
          <td><select><option="1a" selected></option></select></td>
          <td><img id="img1"></td>
       </tr>
       <tr id="row2">
          <td><button class="down_arrow">DOWN</button></td>
          <td><input value="2"></td>
          <td><select><option="2" selected></option></select></td>
          <td><select><option="2a" selected></option></select></td>
          <td><img id="img2"></td>
       </tr>
      <tr><td><input type="submit" value="SAVE"></td></tr>
      </tbody>
    </table>
  </form>

当前的代码-单击UP或DOWN按钮时，表格如下所示：

   <form id="menuitems">
    <table class="toolbaritems">
       <tbody class="sortable">
       <tr id="row2">
          <td><button class="up_arrow">UP</button></td>
          <td><input value="2"></td>
          <td><select><option="2" selected></option></select></td>
          <td><select><option="2a" selected></option></select></td>
          <td><img id="img2"></td>
       </tr>
       <tr id="row1">
          <td><button class="down_arrow">DOWN</button></td>
          <td><input value="1"></td>
          <td><select><option="1" selected></option></select></td>
          <td><select><option="1a" selected></option></select></td>
          <td><img id="img1"></td>
       </tr>
      <tr><td><input type="submit" value="SAVE"></td></tr>
      </tbody>
    </table>
</form>

这就是我要完成的工作-输入值除tr外应交换。注意，tr id保持不变，但是交换了表单值：

有没有一种方法可以用纯JavaScript，香草JS或jquery来实现。如果可以用.html（）而不是.val（）来做，那就更好了。

<form id="menuitems">
    <table class="toolbaritems">
       <tbody class="sortable">
       <tr id="row1">
          <td><button class="down_arrow">DOWN</button></td>
          <td><input value="2"></td>
          <td><select><option="2" selected></option></select></td>
          <td><select><option="2a" selected></option></select></td>
          <td><img id="img2"></td>
       </tr>
       <tr id="row2">
          <td><button class="up_arrow">UP</button></td>
          <td><input value="1"></td>
          <td><select><option="1" selected></option></select></td>
          <td><select><option="1a" selected></option></select></td>
          <td><img id="img1"></td>
       </tr>
      <tr><td><input type="submit" value="SAVE"></td></tr>
      </tbody>
    </table>
</form>

最佳答案

抱歉，花了一段时间才回到这个问题。我将其作为另一个答案提交，以便您可以比较这两种解决方案。它们非常相似，您可能会发现比较更改很有用。

jsFiddle Solution

var tbl = $('table'),new_ndx,topRow,trStuff,botRow,brStuff;
$(document).on('click','button',function() {
    var dir = $(this).attr('class');
    var row = $(this).closest("tr");
    var ndx = row.index();
    //row.remove();
    if (dir=='up_arrow'){
        new_ndx = ndx-1;
        topRow = tbl.find('tr').eq(new_ndx);
        trStuff = topRow.html();
        botRow = tbl.find('tr').eq(ndx);
        brStuff = botRow.html();
        topRow.html(brStuff);
        botRow.html(trStuff);
    } else {
        new_ndx = ndx++;
        topRow = tbl.find('tr').eq(new_ndx);
        trStuff = topRow.html();
        botRow = tbl.find('tr').eq(ndx);
        brStuff = botRow.html();
        topRow.html(brStuff);
        botRow.html(trStuff);
    }
});