How can I swap the form values of table row1 by the form values of table row2 without changing the table rows using javascript?

问题

I am trying to swap the form values in row1 with the form values of row2 without swapping the rows. Can someone show me away to achieve this in pure Javascript, vanilla JS, or jQuery. I made the table rows shorter with just two rows, but the actual table consists of 17 rows. Please look very closely at the ids and form values in the third example.

When the UP or DOWN button is not click, the table looks like this in simple form:

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

This the code currently - When the UP or DOWN buttons are clicked the table looks like this:

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

This is what I am trying to accomplish - The values of the inputs should swap except for the tr. Notices the tr ids remain the same but form values are swapped:

Is there a way to achieve this in pure javascript, vanilla JS, or jquery. It will even be even better if this can be done with .html() instead of .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>

回答1:

Sorry it took awhile to get back to this. I am submitting this as another answer so that you can compare the two solutions. They are quite similar, and you may find it useful to compare the changes.

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

回答2:

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

回答3:

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

回答4:

I'm not entirely sure what you're trying to achieve, but your code is a bit all over the place.

Here's a sample of a pretty basic 'up/down' table row thingy.

Try not to mix using jQuery and vanilla JS. If you're using jQuery, you shouldn't need to use document.getElementsByClassName (or anything similar) at all. Use the $('.class') selector.

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

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

回答6:

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

回答7:

Ali beat me to the punch, but here's another way to do it:

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>

来源：https://stackoverflow.com/questions/35005073/how-can-i-swap-the-form-values-of-table-row1-by-the-form-values-of-table-row2-wi