Ich versuche, die Formularwerte in Zeile1 mit den Formularwerten von Zeile2 zu tauschen, ohne die Zeilen zu tauschen. Kann mich jemand wegführen, um dies in reinem Javascript, Vanille JS oder jQuery zu erreichen. Ich habe die Tabellenzeilen mit nur zwei Zeilen kürzer gemacht, aber die eigentliche Tabelle besteht aus 17 Zeilen. Bitte schauen Sie sich die IDs und Formularwerte im dritten Beispiel genau an.

Wenn die UP- oder DOWN-Taste nicht gedrückt wird, sieht die Tabelle in einfacher Form so aus:

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

Dies ist der aktuelle Code. Wenn Sie auf die Schaltflächen NACH OBEN oder NACH UNTEN klicken, sieht die Tabelle folgendermaßen aus:

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

Dies ist, was ich versuche zu erreichen - Die Werte der Eingänge sollten mit Ausnahme der tr tauschen. Beachten Sie, dass die Tr-IDs gleich bleiben, die Formularwerte jedoch vertauscht werden:

Gibt es eine Möglichkeit, dies mit reinem Javascript, Vanille-JS oder jQuery zu erreichen? Es wird sogar noch besser sein, wenn dies mit .html () anstelle von .val () @ gemacht werden kan

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