Как я могу поменять значения формы таблицы 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>