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

Question

我试图在不交换行的情况下将第 1 行中的表单值与第 2 行中的表单值交换。有人可以告诉我如何在纯 Javascript、香草 JS 或 jQuery 中实现这一目标。我将 table 行缩短为两行，但实际 table 包含 17 行。请仔细查看第三个示例中的 ID 和表单值。

当 UP 或 DOWN 按钮未被点击时，table 看起来像这样的简单形式：

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

这是当前的代码 - 单击向上或向下按钮时，table 看起来像这样：

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

Answer 1

$(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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
   <tr>
      <td>
         <button class="down_arrow">DOWN</button>
         <button class="up_arrow">UP</button>
      </td>
      <td>
         <input value="1">
      </td>
   </tr>
   <tr>
      <td>
         <button class="down_arrow">DOWN</button>
         <button class="up_arrow">UP</button>
      </td>
      <td>
         <input value="2">
      </td>
   </tr>
   <tr>
      <td>
         <button class="down_arrow">DOWN</button>
         <button class="up_arrow">UP</button>
      </td>
      <td>
         <input value="3">
      </td>
   </tr>
   <tr>
      <td>
         <button class="down_arrow">DOWN</button>
         <button class="up_arrow">UP</button>
      </td>
      <td>
         <input value="4">
      </td>
   </tr>
   <tr>
      <td>
         <button class="down_arrow">DOWN</button>
         <button class="up_arrow">UP</button>
      </td>
      <td>
         <input value="5">
      </td>
   </tr>
</table>

Answer 2

$(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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
   <tr>
      <td>
         <button class="down_arrow">DOWN</button>
         <button class="up_arrow">UP</button>
      </td>
      <td>
         <input value="1">
      </td>
   </tr>
   <tr>
      <td>
         <button class="down_arrow">DOWN</button>
         <button class="up_arrow">UP</button>
      </td>
      <td>
         <input value="2">
      </td>
   </tr>
   <tr>
      <td>
         <button class="down_arrow">DOWN</button>
         <button class="up_arrow">UP</button>
      </td>
      <td>
         <input value="3">
      </td>
   </tr>
   <tr>
      <td>
         <button class="down_arrow">DOWN</button>
         <button class="up_arrow">UP</button>
      </td>
      <td>
         <input value="4">
      </td>
   </tr>
   <tr>
      <td>
         <button class="down_arrow">DOWN</button>
         <button class="up_arrow">UP</button>
      </td>
      <td>
         <input value="5">
      </td>
   </tr>
</table>

Answer 3

我不完全确定你想要实现什么，但你的代码有点乱七八糟。

Here's a sample 非常基本的 'up/down' table 行。

尽量不要混合使用 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);
});

Answer 4

阿里抢先一步，但还有另一种方法：

jsFiddle Demo

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
   <tr>
      <td>
         <button class="down_arrow">DOWN</button>
         <button class="up_arrow">UP</button>
      </td>
      <td>
         <input value="1">
      </td>
   </tr>
   <tr>
      <td>
         <button class="down_arrow">DOWN</button>
         <button class="up_arrow">UP</button>
      </td>
      <td>
         <input value="2">
      </td>
   </tr>
   <tr>
      <td>
         <button class="down_arrow">DOWN</button>
         <button class="up_arrow">UP</button>
      </td>
      <td>
         <input value="3">
      </td>
   </tr>
   <tr>
      <td>
         <button class="down_arrow">DOWN</button>
         <button class="up_arrow">UP</button>
      </td>
      <td>
         <input value="4">
      </td>
   </tr>
   <tr>
      <td>
         <button class="down_arrow">DOWN</button>
         <button class="up_arrow">UP</button>
      </td>
      <td>
         <input value="5">
      </td>
   </tr>
</table>

Answer 5

$(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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="menuitems">
        <table class="toolbaritems">
            <tbody class="sortable">
                <tr id="row1">
                    <td>
                        <button type="button" class="up_arrow">UP</button>
                    </td>
                    <td>
                        <button type="button" class="down_arrow">DOWN</button>
                    </td>
                    <td>
                        <input type="text" value="1" />
                    </td>
                    <td>
                        <select>
                            <option value="1" selected>1</option>
                        </select>
                    </td>
                    <td>
                        <select>
                            <option value="1a" selected>1a</option>
                        </select>
                    </td>
                </tr>
                <tr id="row2">
                    <td>
                        <button type="button" class="up_arrow">UP</button>
                    </td>
                    <td>
                        <button type="button" class="down_arrow">DOWN</button>
                    </td>
                    <td>
                        <input type="text" value="2" />
                    </td>
                    <td>
                        <select>
                            <option value="2" selected>2</option>
                        </select>
                    </td>
                    <td>
                        <select>
                            <option value="2a" selected>2a</option>
                        </select>
                    </td>
                </tr>
                <tr id="row3">
                    <td>
                        <button type="button" class="up_arrow">UP</button>
                    </td>
                    <td>
                        <button type="button" class="down_arrow">DOWN</button>
                    </td>
                    <td>
                        <input type="text" value="3" />
                    </td>
                    <td>
                        <select>
                            <option value="3" selected>3</option>
                        </select>
                    </td>
                    <td>
                        <select>
                            <option value="3a" selected>3a</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>

Answer 6

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

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);
    }
});

Answer 7

$(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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="menuitems">
   <table class="toolbaritems">
      <tbody class="sortable">
         <tr id="row1">
            <td>
               <button type="button" class="up_arrow">UP</button>
            </td>
            <td>
               <button type="button" class="down_arrow">DOWN</button>
            </td>
            <td>
               <input type="text" value="1" />
            </td>
            <td>
               <select>
                  <option value="1" selected>1</option>
               </select>
            </td>
            <td>
               <select>
                  <option value="1a" selected>1a</option>
               </select>
            </td>
            <td>
               <img src="http://www.w3schools.com/images/compatible_chrome.gif" id="img1" />
            </td>
         </tr>
         <tr id="row2">
            <td>
               <button type="button" class="up_arrow">UP</button>
            </td>
            <td>
               <button type="button" class="down_arrow">DOWN</button>
            </td>
            <td>
               <input type="text" value="2" />
            </td>
            <td>
               <select>
                  <option value="2" selected>2</option>
               </select>
            </td>
            <td>
               <select>
                  <option value="2a" selected>2a</option>
               </select>
            </td>
            <td>
               <img src="http://www.w3schools.com/images/compatible_opera.gif" id="img2" />
            </td>
         </tr>
         <tr id="row3">
            <td>
               <button type="button" class="up_arrow">UP</button>
            </td>
            <td>
               <button type="button" class="down_arrow">DOWN</button>
            </td>
            <td>
               <input type="text" value="3" />
            </td>
            <td>
               <select>
                  <option value="3" selected>3</option>
               </select>
            </td>
            <td>
               <select>
                  <option value="3a" selected>3a</option>
               </select>
            </td>
            <td>
               <img src="http://www.w3schools.com/images/compatible_firefox.gif" id="img3" />
            </td>
         </tr>
      </tbody>
   </table>
</form>

如何在不使用 javascript 更改 table 行的情况下，用 table row2 的表单值交换 table 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?

javascript

jquery

html-table

dom-traversal