javascript - 如何在不使用 javascript 交换表行的情况下交换表行中的表单值？

Question

我试图将 row1 中的表单值与 row2 中的表单值交换，而不交换行。有人可以告诉我如何用纯 javascript、vanilla 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>
       </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>
       </tr>
      <tr><td><input type="submit" value="SAVE"></td></tr>
      </tbody>
    </table>
  </form>

当前代码 - 单击“向上”或“向下”按钮时，表格如下所示:

   <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>
       </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>
       </tr>
      <tr><td><input type="submit" value="SAVE"></td></tr>
      </tbody>
    </table>
</form>

这就是我想要实现的目标 - 除了 tr 之外，输入的值应该交换。请注意，tr id 保持不变，但表单值已交换:

<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>
       </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>
       </tr>
      <tr><td><input type="submit" value="SAVE"></td></tr>
      </tbody>
    </table>
</form>

Answer 1

这只是交换整行，而不是尝试重新排列每个单独的表单元素，这会以更少的努力获得相同的结果:

$('.down_arrow').click(function() {
  $(this).closest('tr').insertAfter($(this).closest('tr').next());
});

$('.up_arrow').click(function() {
  $(this).closest('tr').insertBefore($(this).closest('tr').prev());
});

table tr:first-child .up_arrow {
  opacity: 0
}
table tr:last-child .down_arrow {
  opacity: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- I took the liberty of fixing up the broken <option> tags here.  If that was supposed to be two separate <select>s, this code will still work exactly the same -->
<table>
  <tr>
    <td>
      <button class="down_arrow">↓</button>
      <button class="up_arrow">↑</button>
    </td>
    <td><input value="1"></td>
    <td><select><option>1</option><option>1a</option></select>
    </td>
  </tr>
  <tr>
    <td>
      <button class="down_arrow">↓</button>
      <button class="up_arrow">↑</button>
    </td>
    <td><input value="2"></td>
    <td><select><option>2</option><option>2a</option></select>
    </td>
  </tr>
    <tr>
    <td>
      <button class="down_arrow">↓</button>
      <button class="up_arrow">↑</button>
    </td>
    <td><input value="3"></td>
    <td><select><option>3</option><option>3a</option></select>
    </td>
  </tr>
  <tr>
    <td>
      <button class="down_arrow">↓</button>
      <button class="up_arrow">↑</button>
    </td>
    <td><input value="4"></td>
    <td><select><option>4</option><option>4a</option></select>
    </td>
  </tr>
</table>

将事件绑定(bind)到表本身而不是每个单独的按钮可能会更好:

$('table').on('click','.down_arrow',function() {...});

这样您就可以以编程方式添加或删除表行，而无需添加新的绑定(bind)。 (在这种情况下，通常要小心使用 .html() 覆盖 DOM 的部分内容，因为它会破坏您可能已经包含的任何事件绑定(bind)。)