gpt4 book ai didi

javascript - 如何在不使用 javascript 更改表行的情况下用表 row2 的表单值交换表 row1 的表单值?

转载 作者:行者123 更新时间:2023-11-30 07:58:08 24 4
gpt4 key购买 nike

我试图在不交换行的情况下将 row1 中的表单值与 row2 的表单值交换。有人可以告诉我用纯 Javascript、vanilla JS 或 jQuery 实现这一点吗?我将表格行缩短为两行,但实际表格包含 17 行。请仔细查看第三个示例中的 ID 和表单值。

当 UP 或 DOWN 按钮未被点击时,表格的简单形式如下所示:

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

这是当前的代码 - 单击向上或向下按钮时,表格如下所示:

   <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 id 保持不变,但交换了表单值:

有没有办法在纯 javascript、vanilla JS 或 jquery 中实现这一点。如果可以用 .html() 而不是 .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>

最佳答案

抱歉,过了一段时间才回到这个话题。我将此作为另一个答案提交,以便您可以比较这两个解决方案。它们非常相似,您可能会发现比较变化很有用。

jsFiddle Solution

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 - 如何在不使用 javascript 更改表行的情况下用表 row2 的表单值交换表 row1 的表单值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35005073/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com