Как я могу поменять значения формы таблицы row1 на значения формы таблицы row2, не меняя строки таблицы с помощью javascript?

Я пытаюсь поменять значения формы в строке 1 со значениями формы строки 2 без обмена строк. Может кто-нибудь показать мне, чтобы достичь этого в чистом Javascript, vanilla JS или jQuery. Я сделал строки таблицы короче всего двумя строками, но фактическая таблица состоит из 17 строк. Пожалуйста, внимательно посмотрите на идентификаторы и значения формы в третьем примере.

Когда кнопка ВВЕРХ или ВНИЗ не нажата, таблица выглядит следующим образом:

   <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>

Этот код в настоящее время - при нажатии кнопок ВВЕРХ или ВНИЗ таблица выглядит следующим образом:

   <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. Обратите внимание, что идентификаторы остаются неизменными, но значения форм меняются местами:

Есть ли способ добиться этого в чистом javascript, vanilla 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>

Ответы на вопрос(0)

Ваш ответ на вопрос