如何在不使用javascript更改表行的情况下，使用表row2的表单值交换表row1的表单值？ [英] How can I swap the form values of table row1 by the form values of table row2 without changing the table rows using javascript?

问题描述

我试图将row1中的表单值与row2的表单值交换而不交换行。有人可以告诉我在纯Javascript，vanilla JS或jQuery中实现这一点。我只用两行使表行更短，但实际表包含17行。请仔细查看第三个示例中的ID和表单值。

I am trying to swap the form values in row1 with the form values of row2 without swapping the rows. Can someone show me away to achieve this in pure Javascript, vanilla JS, or jQuery. I made the table rows shorter with just two rows, but the actual table consists of 17 rows. Please look very closely at the ids and form values in the third example.

如果未单击向上或向下按钮，表格将以简单形式显示：

When the UP or DOWN button is not click, the table looks like this in simple form:

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

此代码当前 - 当点击向上或向下按钮时，表格如下所示：

This the code currently - When the UP or DOWN buttons are clicked the table looks like this:

   <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。注意tr trids保持不变但是表格值被交换：

This is what I am trying to accomplish - The values of the inputs should swap except for the tr. Notices the tr ids remain the same but form values are swapped:

有没有办法在纯javascript，vanilla JS或jquery中实现这一点。如果可以使用.html（）代替.val（）

Is there a way to achieve this in pure javascript, vanilla JS, or jquery. It will even be even better if this can be done with .html() instead of .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>

推荐答案

很抱歉，需要一段时间才能回到此状态。我将此作为另一个答案提交，以便您可以比较这两种解决方案。它们非常相似，您可能会发现比较这些更改很有用。

Sorry it took awhile to get back to this. I am submitting this as another answer so that you can compare the two solutions. They are quite similar, and you may find it useful to compare the changes.

jsFiddle解决方案

var tbl = $('table'),new_ndx,topRow,trStuff,botRow,brStuff;
$(document).on('click','button',function() {
    var dir = $(this).attr('class');
    var row = $(this).closest("tr");
    var ndx = row.index();
    //row.remove();
    if (dir=='up_arrow'){
        new_ndx = ndx-1;
        topRow = tbl.find('tr').eq(new_ndx);
        trStuff = topRow.html();
        botRow = tbl.find('tr').eq(ndx);
        brStuff = botRow.html();
        topRow.html(brStuff);
        botRow.html(trStuff);
    } else {
        new_ndx = ndx++;
        topRow = tbl.find('tr').eq(new_ndx);
        trStuff = topRow.html();
        botRow = tbl.find('tr').eq(ndx);
        brStuff = botRow.html();
        topRow.html(brStuff);
        botRow.html(trStuff);
    }
});

这篇关于如何在不使用javascript更改表行的情况下，使用表row2的表单值交换表row1的表单值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！