如何在不使用javascript更改表行的情况下，使用表row2的表单值交换表row1的表单值？
我试图将row1中的表单值与row2的表单值交换而不交换行。 有人可以告诉我在纯Javascript，vanilla JS或jQuery中实现这一点。 我只用两行使表行更短，但实际表包含17行。 请仔细查看第三个示例中的ID和表单值。
如果未单击“向上”或“向下”按钮，则表格将以简单forms显示：
这是当前的代码 – 当单击UP或DOWN按钮时，表格如下所示：
这是我想要完成的 – 输入的值应该交换除了tr。 注意tr trids保持不变但表格值被交换：
有没有办法在纯javascript，vanilla JS或jquery中实现这一点。 如果可以用.html（）而不是.val（）来完成它甚至会更好
对不起，需要一段时间才能回到这里。 我将此作为另一个答案提交，以便您可以比较这两种解决方案。 它们非常相似，您可能会发现比较这些更改很有用。
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); } });
$(document).ready(function() { $(".up_arrow,.down_arrow").click(function() { var row = $(this).parents("tr"); if ($(this).is(".up_arrow")) { alert("Inner Html Of Previous Row : " + row.prev().html()); } else { alert("Inner Html Of Next Row : " + row.next().html()); } }); });
table tr:first-child .up_arrow, table tr:last-child .down_arrow { visibility: hidden; }
$(document).ready(function() { $(".up_arrow,.down_arrow").click(function() { var objRow = $(this).parents("tr"); var intCurrentInputValue = objRow.find("input").val(); if ($(this).is(".up_arrow")) { var intPreviousInputValue = objRow.prev("tr").find("input").val(); objRow.find("input").val(intPreviousInputValue); objRow.prev("tr").find("input").val(intCurrentInputValue); } else { var intNextInputValue = objRow.next("tr").find("input").val(); objRow.find("input").val(intNextInputValue); objRow.next("tr").find("input").val(intCurrentInputValue); } }); });
table tr:first-child .up_arrow , table tr:last-child .down_arrow { visibility: hidden; }
我不完全确定你想要实现的目标，但你的代码有点遍布。
这是一个非常基本的“上/下”表格行的示例 。
尽量不要使用jQuery和vanilla JS混合使用。 如果您使用的是jQuery，则根本不需要使用document.getElementsByClassName （或任何类似的东西）。 使用$('.class')选择器。
$('table').on('click', '.up', function(){ var $row = $(this).parents('tr'); var $prevRow = $(this).parents('tr').prev('tr'); $row.insertBefore($prevRow); }); $('table').on('click', '.down', function(){ var $row = $(this).parents('tr'); var $prevRow = $(this).parents('tr').next('tr'); $row.insertAfter($prevRow); });
$(document).ready(function() { $(".up_arrow,.down_arrow").click(function(e) { var objCurrentRow = $(this).parents("tr"); var objAnotherRow = objCurrentRow.next("tr"); if ($(this).is(".up_arrow")) { var objAnotherRow = objCurrentRow.prev("tr"); } var arrAllInputOfCurrentRow = objCurrentRow.find("input,select"); var arrAllInputOfAnotherRow = objAnotherRow.find("input,select"); $.each(arrAllInputOfCurrentRow, function(intIndex, objInput) { var mixTempValue = $(objInput).val(); var $objAnotherInput = $(arrAllInputOfAnotherRow[intIndex]); $(objInput).val($objAnotherInput.val()); if ($objAnotherInput.is('select')) { var objTempDropDown = $(objInput).html(); $(objInput).html($objAnotherInput.html()); $objAnotherInput.html(objTempDropDown); } $objAnotherInput.val(mixTempValue); }); }); });
table tr:first-child .up_arrow, table tr:last-child .down_arrow { visibility: hidden; }
$(document).on("click", ".up_arrow,.down_arrow", function(e) { var $objCurrentRow = $(this).parents("tr"); var strTempHtml = $objCurrentRow.html(); var $objAnotherRow = $objCurrentRow.next("tr"); if ($(this).is(".up_arrow")) { var $objAnotherRow = $objCurrentRow.prev("tr"); } $objCurrentRow.html($objAnotherRow.html()); $objAnotherRow.html(strTempHtml); });
table tr:first-child .up_arrow, table tr:last-child .down_arrow { visibility: hidden; }
阿里打败了我，但这是另一种方式：
jsFiddle演示
var tbl = $('table'),new_ndx; $(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; tbl.find('tr').eq(new_ndx).before(row); }else{ new_ndx = ndx++; tbl.find('tr').eq(new_ndx).after(row); } });
table tr:first-child .up_arrow, table tr:last-child .down_arrow {visibility: hidden;}