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

时间：2016-01-26 00:32:08

标签： javascript jquery html-table dom-traversal

我正在尝试将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>
          <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>

此代码当前 - 当单击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>
          <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保持不变但是表格值被交换：

有没有办法在纯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>

7 个答案:

答案 0 :(得分：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>

答案 1 :(得分：1)

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

答案 2 :(得分：1)

我不完全确定你想要实现的目标，但你的代码有点遍布。

Here's a sample一个非常基本的'上/下'表格行。

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

答案 3 :(得分：1)

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

答案 4 :(得分：1)

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

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

答案 5 :(得分：1)

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

答案 6 :(得分：0)

阿里打败了我，但这是另一种方式：

jsFiddle Demo

＆＃13;
＆＃13; 
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);
	}
});
＆＃13; 
table tr:first-child .up_arrow,
table tr:last-child .down_arrow {visibility: hidden;}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题