¿Cómo puedo cambiar los valores de formulario de la tabla fila1 por los valores de formulario de la tabla fila2 sin cambiar las filas de la tabla usando javascript?

Question

Jan 26, 2016, 01:32 AM

jquery html-table dom-traversal javascript

¿Cómo puedo cambiar los valores de formulario de la tabla fila1 por los valores de formulario de la tabla fila2 sin cambiar las filas de la tabla usando javascript?

Estoy tratando de intercambiar los valores del formulario en la fila1 con los valores del formulario de la fila2 sin intercambiar las filas. ¿Alguien puede mostrarme para lograr esto en Javascript puro, JS vainilla o jQuery? Hice las filas de la tabla más cortas con solo dos filas, pero la tabla real consta de 17 filas. Mire muy de cerca los identificadores y los valores de formulario en el tercer ejemplo.

Cuando no se hace clic en el botón ARRIBA o ABAJO, la tabla se ve así en forma simple:

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

Este es el código actualmente: cuando se hace clic en los botones ARRIBA o ABAJO, la tabla se ve así:

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

Esto es lo que estoy tratando de lograr: los valores de las entradas deberían intercambiarse excepto el tr. Observa que los trids permanecen iguales pero los valores de los formularios se intercambian:

¿Hay alguna manera de lograr esto en javascript puro, vanilla JS o jquery? Incluso será aún mejor si esto se puede hacer con .html () en lugar de .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>