Change the position on the second click

Question

Change the position on the second click

I am trying to implement a manual sorting feature for a table of persons. The idea is to allow users to select a person by clicking on the row, then select another person by clicking on them, and have the two selected rows switch positions without using drag and drop functionality.

While I have managed to select one row successfully, I am facing difficulty in selecting the second row. My current train of thought involves potentially using jQuery's replaceWith method to switch the positions of the selected rows.

$(document).ready(function(){

 var selections = new Array(2);

 $("tr").click(function() {

    var selected = $(this).attr('id');

    //highlight selected row
    $(this).toggleClass("marked");

  })

});

I have set up a fiddle demonstrating my progress: http://jsfiddle.net/zLz929xy/3

Any suggestions or guidance on how to tackle this issue would be greatly appreciated.

jquery css html-table

Answer 1

Answer №1

Check out this fiddle I made for you.

I've made some changes to your fiddle structure.

The code essentially checks if there is an existing "marked" element in the row and swaps the elements of the first row with those of the second row if found. You can also include var oldRowId = $(row).attr('id') and

var newRowId = $(element).attr('id')

to switch the row IDs as well.

In my opinion, this is the simplest way to achieve this.

$(document).ready(function(){
    $("tr").click(function() {
        var row = $(this);
        
        var check = false;
        $.each($('#people tbody tr'), function(idx, element) {
            if($(element).hasClass('marked')) {
                // old values from row
                var oldId = $(row).find('.id').html();
                var oldName = $(row).find('.name').html();
                
                // new values 
                var rowId = $(element).find('.id').html();
                var rowName = $(element).find('.name').html();
                
                // Replace element
                $(element).find('.id').html(oldId);
                $(element).find('.name').html(oldName);
                
                $(row).find('.id').html(rowId);
                $(row).find('.name').html(rowName);
            
            // check
                check = true;
            }
        });

        if(!check) {
            $(this).toggleClass("marked");
        } else {
            $.each($('#people tbody tr'), function(idx, element) {
            if($(element).hasClass('marked')) {
                $(element).toggleClass('marked');
                }
            });
        }
    })
});

html {
 font-family: Verdana;
 font-size: 10pt;
}

td{
border: 1px solid;
}

.marked {
 background: #e5e5e5;
 font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="people">
  <tbody>
    <tr>
        <th class="id">ID</th>
        <th class="name">Name</th>
    </tr>

    <tr id="user_1">
        <td class="id">1</td>
        <td class="name">Bob</td>
    </tr>
    <tr id="user_2">
        <td class="id">2</td>
        <td class="name">Carl</td>
    </tr>
    <tr id="user_3">
        <td class="id">3</td>
        <td class="name">Jane</td>
    </tr>
    <tr id="user_4">
        <td class="id">4</td>
        <td class="name">Steven</td>
    </tr>
    <tr id="user_5">
        <td class="id">5</td>
        <td class="name">Sarah</td>
    </tr>
    <tr id="user_6">
        <td class="id">6</td>
        <td class="name">Marc</td>
    </tr>
  </tbody>
</table>

Answer 2

Check out this fiddle I made for you.

I've made some changes to your fiddle structure.

The code essentially checks if there is an existing "marked" element in the row and swaps the elements of the first row with those of the second row if found. You can also include var oldRowId = $(row).attr('id') and

var newRowId = $(element).attr('id')

to switch the row IDs as well.

In my opinion, this is the simplest way to achieve this.

$(document).ready(function(){
    $("tr").click(function() {
        var row = $(this);
        
        var check = false;
        $.each($('#people tbody tr'), function(idx, element) {
            if($(element).hasClass('marked')) {
                // old values from row
                var oldId = $(row).find('.id').html();
                var oldName = $(row).find('.name').html();
                
                // new values 
                var rowId = $(element).find('.id').html();
                var rowName = $(element).find('.name').html();
                
                // Replace element
                $(element).find('.id').html(oldId);
                $(element).find('.name').html(oldName);
                
                $(row).find('.id').html(rowId);
                $(row).find('.name').html(rowName);
            
            // check
                check = true;
            }
        });

        if(!check) {
            $(this).toggleClass("marked");
        } else {
            $.each($('#people tbody tr'), function(idx, element) {
            if($(element).hasClass('marked')) {
                $(element).toggleClass('marked');
                }
            });
        }
    })
});

html {
 font-family: Verdana;
 font-size: 10pt;
}

td{
border: 1px solid;
}

.marked {
 background: #e5e5e5;
 font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="people">
  <tbody>
    <tr>
        <th class="id">ID</th>
        <th class="name">Name</th>
    </tr>

    <tr id="user_1">
        <td class="id">1</td>
        <td class="name">Bob</td>
    </tr>
    <tr id="user_2">
        <td class="id">2</td>
        <td class="name">Carl</td>
    </tr>
    <tr id="user_3">
        <td class="id">3</td>
        <td class="name">Jane</td>
    </tr>
    <tr id="user_4">
        <td class="id">4</td>
        <td class="name">Steven</td>
    </tr>
    <tr id="user_5">
        <td class="id">5</td>
        <td class="name">Sarah</td>
    </tr>
    <tr id="user_6">
        <td class="id">6</td>
        <td class="name">Marc</td>
    </tr>
  </tbody>
</table>

Answer 3

Answer №2

I have simplified the process by avoiding arrays, loops, and checking classes when removing the "marked" class. As we only need to deal with one row marked as "marked", there is no necessity for iteration or class checks.

Furthermore, since we always switch the entire rows, we can simply extract all of their html content instead of dividing it into distinct pieces for tracking and manipulation.

$(document).ready(function(){
    var somethingSelected = false;
    var firstRow;
    var firstRowHTML;
    var secondRow;

    $("tr").click(function() {
        if (somethingSelected) {
            secondRow = $(this);
            firstRow.html(secondRow.html());
            secondRow.html(firstRowHTML);
            somethingSelected = false;
            $("tr").removeClass("marked");
        } else {
            somethingSelected = true;
            firstRow = $(this);
            firstRowHTML = firstRow.html();
            $(this).addClass("marked");
        }
    }); 
});

html {
 font-family: Verdana;
 font-size: 10pt;
}

td{
border: 1px solid;
}

.marked {
 background: #e5e5e5;
 font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="people">

    <tr>
        <th id="id">ID</th>
        <th id="name">Name</th>
    </tr>

    <tr id="user_1">
        <td headers="id">1</td>
        <td headers="name">Bob</td>
    </tr>
    <tr id="user_2">
        <td headers="id">2</td>
        <td headers="name">Carl</td>
    </tr>
    <tr id="user_3">
        <td headers="id">3</td>
        <td headers="name">Jane</td>
    </tr>
    <tr id="user_4">
        <td headers="id">4</td>
        <td headers="name">Steven</td>
    </tr>
    <tr id="user_5">
        <td headers="id">5</td>
        <td headers="name">Sarah</td>
    </tr>
    <tr id="user_6">
        <td headers="id">6</td>
        <td headers="name">Marc</td>
    </tr>

</table>

Answer 4

I have simplified the process by avoiding arrays, loops, and checking classes when removing the "marked" class. As we only need to deal with one row marked as "marked", there is no necessity for iteration or class checks.

Furthermore, since we always switch the entire rows, we can simply extract all of their html content instead of dividing it into distinct pieces for tracking and manipulation.

$(document).ready(function(){
    var somethingSelected = false;
    var firstRow;
    var firstRowHTML;
    var secondRow;

    $("tr").click(function() {
        if (somethingSelected) {
            secondRow = $(this);
            firstRow.html(secondRow.html());
            secondRow.html(firstRowHTML);
            somethingSelected = false;
            $("tr").removeClass("marked");
        } else {
            somethingSelected = true;
            firstRow = $(this);
            firstRowHTML = firstRow.html();
            $(this).addClass("marked");
        }
    }); 
});

html {
 font-family: Verdana;
 font-size: 10pt;
}

td{
border: 1px solid;
}

.marked {
 background: #e5e5e5;
 font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="people">

    <tr>
        <th id="id">ID</th>
        <th id="name">Name</th>
    </tr>

    <tr id="user_1">
        <td headers="id">1</td>
        <td headers="name">Bob</td>
    </tr>
    <tr id="user_2">
        <td headers="id">2</td>
        <td headers="name">Carl</td>
    </tr>
    <tr id="user_3">
        <td headers="id">3</td>
        <td headers="name">Jane</td>
    </tr>
    <tr id="user_4">
        <td headers="id">4</td>
        <td headers="name">Steven</td>
    </tr>
    <tr id="user_5">
        <td headers="id">5</td>
        <td headers="name">Sarah</td>
    </tr>
    <tr id="user_6">
        <td headers="id">6</td>
        <td headers="name">Marc</td>
    </tr>

</table>

Answer 5

Answer №3

Implementing the swap functionality as per the solution provided at this link:

var selections = new Array(2);

$("tr").click(function() {

  var selected = $(this).attr('id');

  //highlight selected row
  if ($('.marked').length) {
    $(this).swapWith($('.marked'));
    $('.marked').toggleClass("marked");
  }
  $(this).toggleClass("marked");
})


jQuery.fn.swapWith = function(to) {
  return this.each(function() {
    var copy_to = $(to).clone(true);
    var copy_from = $(this).clone(true);
    $(to).replaceWith(copy_from);
    $(this).replaceWith(copy_to);
  });
};

html {
 font-family: Verdana;
 font-size: 10pt;
}

td{
border: 1px solid;
}

.marked {
 background: #e5e5e5;
 font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="people">

  <tr>
    <th id="id">ID</th>
    <th id="name">Name</th>
  </tr>

  <tr id="user_1">
    <td headers="id">1</td>
    <td headers="name">Bob</td>
  </tr>
  <tr id="user_2">
    <td headers="id">2</td>
    <td headers="name">Carl</td>
  </tr>
  <tr id="user_3">
    <td headers="id">3</td>
    <td headers="name">Jane</td>
  </tr>
  <tr id="user_4">
    <td headers="id">4</td>
    <td headers="name">Steven</td>
  </tr>
  <tr id="user_5">
    <td headers="id">5</td>
    <td headers="name">Sarah</td>
  </tr>
  <tr id="user_6">
    <td headers="id">6</td>
    <td headers="name">Marc</td>
  </tr>

</table>

Answer 6

Implementing the swap functionality as per the solution provided at this link:

var selections = new Array(2);

$("tr").click(function() {

  var selected = $(this).attr('id');

  //highlight selected row
  if ($('.marked').length) {
    $(this).swapWith($('.marked'));
    $('.marked').toggleClass("marked");
  }
  $(this).toggleClass("marked");
})


jQuery.fn.swapWith = function(to) {
  return this.each(function() {
    var copy_to = $(to).clone(true);
    var copy_from = $(this).clone(true);
    $(to).replaceWith(copy_from);
    $(this).replaceWith(copy_to);
  });
};

html {
 font-family: Verdana;
 font-size: 10pt;
}

td{
border: 1px solid;
}

.marked {
 background: #e5e5e5;
 font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="people">

  <tr>
    <th id="id">ID</th>
    <th id="name">Name</th>
  </tr>

  <tr id="user_1">
    <td headers="id">1</td>
    <td headers="name">Bob</td>
  </tr>
  <tr id="user_2">
    <td headers="id">2</td>
    <td headers="name">Carl</td>
  </tr>
  <tr id="user_3">
    <td headers="id">3</td>
    <td headers="name">Jane</td>
  </tr>
  <tr id="user_4">
    <td headers="id">4</td>
    <td headers="name">Steven</td>
  </tr>
  <tr id="user_5">
    <td headers="id">5</td>
    <td headers="name">Sarah</td>
  </tr>
  <tr id="user_6">
    <td headers="id">6</td>
    <td headers="name">Marc</td>
  </tr>

</table>

Answer 7

Answer №4

Personally, I believe adding a double click event to the second selection is essential as single clicks can be prone to accidental activation.

If not careful, mistakes could easily occur.

If you are open to this suggestion, you might want to consider implementing the dblclick event with the following code snippet;


$("tr").dblclick(function(e) {
    if ($('.marked').length == 1) {
        var marked     = $('.marked').html(),
            marked_id  = $('.marked').attr('id'),
            element    = $(this).html(),
            element_id = $(this).attr('id');
        $('tr[id="'+marked_id+'"]').html(element);
        $('tr[id="'+element_id+'"]').html(marked);
        $('tr').removeClass('marked');
    }
});

By checking if $('.marked').length is equal to 1, we ensure that the dblclick event is triggered only when one element is selected, making it easier to swap them out.

Simply store the html() of the TR along with their respective IDs for smooth swapping functionality.

View live preview here: http://jsfiddle.net/MrMarlow/zLz929xy/7/

Answer 8

Personally, I believe adding a double click event to the second selection is essential as single clicks can be prone to accidental activation.

If not careful, mistakes could easily occur.

If you are open to this suggestion, you might want to consider implementing the dblclick event with the following code snippet;


$("tr").dblclick(function(e) {
    if ($('.marked').length == 1) {
        var marked     = $('.marked').html(),
            marked_id  = $('.marked').attr('id'),
            element    = $(this).html(),
            element_id = $(this).attr('id');
        $('tr[id="'+marked_id+'"]').html(element);
        $('tr[id="'+element_id+'"]').html(marked);
        $('tr').removeClass('marked');
    }
});

By checking if $('.marked').length is equal to 1, we ensure that the dblclick event is triggered only when one element is selected, making it easier to swap them out.

Simply store the html() of the TR along with their respective IDs for smooth swapping functionality.

View live preview here: http://jsfiddle.net/MrMarlow/zLz929xy/7/

Change the position on the second click

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Altering content using jQuery

JavaScript doesn't seem to be functioning properly within PHP

Tips for ensuring a scrollbar remains at the bottom position

The Feedback Form jQuery is not providing any data

Retrieve the final ID of a dynamic div

What is the best way to display JSON within a partial?

The Kendo grid and Jquery functionalities seem to be malfunctioning on my View page

Creating animated image transitions (image swapping) using jQuery

tips for loading json data into jqgrid

Submit a form utilizing jQuery's ajax function

Altering the backdrop upon hovering over an element

Tips for utilizing a variable within a variable containing HTML code

Fundamentals of object property in jQuery and Javascript

Rails Unobtrusive JavaScript (UJS) does not seem to be connecting the data-remote

Pictures are not appearing correctly when utilizing the img-fluid class

Font and div placement varies on a mac within a WordPress environment

Cloning Div repeatedly instead of the specified quantity

Guide on transmitting information from two separate pages to a PHP script simultaneously using an AJAX request

Fetch data using hashchange event and jQuery based on the file name that is not included in the hash parameter

jQuery live function is not functioning as anticipated