Como posso trocar os valores do formulário da tabela linha1 pelos valores da tabela linha2 sem alterar as linhas da tabela usando javascript?

Question

Jan 26, 2016, 01:32 AM

javascript html-table jquery dom-traversal

Como posso trocar os valores do formulário da tabela linha1 pelos valores da tabela linha2 sem alterar as linhas da tabela usando javascript?

Estou tentando trocar os valores do formulário na linha1 com os valores do formulário da linha2 sem trocar as linhas. Alguém pode me mostrar para conseguir isso em Javascript puro, JS baunilha ou jQuery. Reduzi as linhas da tabela com apenas duas linhas, mas a tabela real consiste em 17 linhas. Observe atentamente os IDs e os valores do formulário no terceiro exemplo.

Quando o botão ACIMA ou ABAIXO não é clicado, a tabela fica assim:

   <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 é o código atualmente - Quando os botões UP ou DOWN são clicados, a tabela fica assim:

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

É isso que estou tentando realizar - Os valores das entradas devem ser trocados, exceto o tr. Observa que os IDs de tr permanecem os mesmos, mas os valores do formulário são trocados:

Existe uma maneira de conseguir isso em javascript puro, JS baunilha ou jquery. Será ainda melhor se isso puder ser feito com .html () em vez 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>