Question

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

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

   <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>
       </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>
       </tr>
      <tr><td><input type="submit" value="SAVE"></td></tr>
      </tbody>
    </table>
  </form>

此代码当前 - 当单击UP或DOWN按钮时，表格如下所示：

   <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>
       </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>
       </tr>
      <tr><td><input type="submit" value="SAVE"></td></tr>
      </tbody>
    </table>
</form>

这就是我想要完成的事情 - 除了tr之外，输入的值应该交换。注意tr trids保持不变但是表格值被交换：

<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>
       </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>
       </tr>
      <tr><td><input type="submit" value="SAVE"></td></tr>
      </tbody>
    </table>
</form>

Answer 1

而不是尝试重新排列每个单独的表单元素，这只是交换整个行，这会产生相同的结果而且工作量更少：

table tr:first-child .up_arrow {
  opacity: 0
}
table tr:last-child .down_arrow {
  opacity: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- I took the liberty of fixing up the broken <option> tags here.  If that was supposed to be two separate <select>s, this code will still work exactly the same -->
<table>
  <tr>
    <td>
      <button class="down_arrow">↓</button>
      <button class="up_arrow">↑</button>
    </td>
    <td><input value="1"></td>
    <td><select><option>1</option><option>1a</option></select>
    </td>
  </tr>
  <tr>
    <td>
      <button class="down_arrow">↓</button>
      <button class="up_arrow">↑</button>
    </td>
    <td><input value="2"></td>
    <td><select><option>2</option><option>2a</option></select>
    </td>
  </tr>
    <tr>
    <td>
      <button class="down_arrow">↓</button>
      <button class="up_arrow">↑</button>
    </td>
    <td><input value="3"></td>
    <td><select><option>3</option><option>3a</option></select>
    </td>
  </tr>
  <tr>
    <td>
      <button class="down_arrow">↓</button>
      <button class="up_arrow">↑</button>
    </td>
    <td><input value="4"></td>
    <td><select><option>4</option><option>4a</option></select>
    </td>
  </tr>
</table>

$('table').on('click','.down_arrow',function() {...});

将事件绑定到表本身而不是每个单独的按钮可能更好：

.html()

这样，您可以以编程方式添加或删除表行，而无需添加新绑定。（在这种情况下，通常要警惕使用function*test() { console.log(yield) console.log(yield(true).test) } var generator = test() generator.next({ test: true }) generator.next({ test: true }) generator.next({ test: true })来覆盖DOM的部分内容，因为它会吹掉你可能已经包含的任何事件绑定。）

如何在不使用javascript交换表行的情况下交换表行中的表单值？

1 个答案: