Shuffling specific table cells to exchange positions

Question

Shuffling specific table cells to exchange positions

I am attempting to create a script that will allow certain td elements (but not all) in different tr elements to switch places with the ones directly above or below them. My goal is to only target the last 3 td elements in each row, rather than the entire row. I have been struggling to find a solution that will specifically target these 3 td elements without affecting the rest of the row.

You can view the example I have created here: http://codepen.io/anon/pen/qwHbz

I am aware that a simple solution like the following can swap entire rows:

$("#Row1").after($("#Row2"));

However, I am interested in targeting only the specific td elements within each row. For example, if I were to click .saTableDown on the first row that contains it, I would like the Target, Level, and Instruction td elements to swap with the ones below it, and so on. Is it possible to achieve this using jQuery or JavaScript? I have been unable to find a solution so far. Thank you for your help!

javascript jquery html css

Answer 1

Answer №1

Is this the solution you were looking for?

http://codepen.io/anon/pen/rEJxH

To achieve the desired functionality, the script finds the index of the clicked tr element and swaps it with the previous or next tr if it's not the first or last element. The code assumes you have access to the necessary HTML markup to assign classes to the number and target elements within the table rows.

Here's the jQuery code snippet:

$('.saTableUp').click(function(){
    var parentTr = $(this).parent().parent();
    var index = parentTr.index();

    if (index > 1) {
      var parentSwap = parentTr.prev();
      parentSwap.before(parentTr);
      parentTr.children('.num').before(parentSwap.children('.num'));
      parentSwap.children('.target').before(parentTr.children('.num:eq(1)'));
    }
});

$('.saTableDown').click(function(){
    var parentTr = $(this).parent().parent();
    var index = parentTr.index();

    if (index < 4) {
      var parentSwap = parentTr.next();
      parentSwap.after(parentTr);
      parentTr.children('.num').before(parentSwap.children('.num'));
      parentSwap.children('.target').before(parentTr.children('.num:eq(1)'));
    }
});

Answer 2

Is this the solution you were looking for?

http://codepen.io/anon/pen/rEJxH

To achieve the desired functionality, the script finds the index of the clicked tr element and swaps it with the previous or next tr if it's not the first or last element. The code assumes you have access to the necessary HTML markup to assign classes to the number and target elements within the table rows.

Here's the jQuery code snippet:

$('.saTableUp').click(function(){
    var parentTr = $(this).parent().parent();
    var index = parentTr.index();

    if (index > 1) {
      var parentSwap = parentTr.prev();
      parentSwap.before(parentTr);
      parentTr.children('.num').before(parentSwap.children('.num'));
      parentSwap.children('.target').before(parentTr.children('.num:eq(1)'));
    }
});

$('.saTableDown').click(function(){
    var parentTr = $(this).parent().parent();
    var index = parentTr.index();

    if (index < 4) {
      var parentSwap = parentTr.next();
      parentSwap.after(parentTr);
      parentTr.children('.num').before(parentSwap.children('.num'));
      parentSwap.children('.target').before(parentTr.children('.num:eq(1)'));
    }
});

Shuffling specific table cells to exchange positions

Answer №1

Similar questions

Managing State with Vuex: Storing Getter Results in the State

Send information from a dropdown selection to mysql database without needing to reload the page

Calculate the overall length of a specified time interval using Node Js

The header and footer are not extending across the entire width of the page

Error encountered when sending information to web service repeatedly

There seems to be a caching issue in ReactJS and Spring Data Rest that could be causing problems with

What are the semantics behind implementing Basic Authentication in AngularJS and Spring Boot?

Are the nav, footer, header tags not functioning correctly?

JavaScript problem encountered when using the forEach() function on $el

Every time I try to run npm start on my React app, I keep receiving the error message "? Something is already running on port 3000"

The RequiredFieldValidator and RegularExpressionValidator are not functioning properly

The unusual behavior of a page refresh in jQuery when replacing content

JavaScript hovering drop-down feature

Tips on how to patiently wait until the database connection is established and all queries are successfully executed for every database specified in an array

The current status of an ASP.Net Mvc Ajax request

Track when a user modifies a <select> dropdown list generated using the Jquery method ".html()"

Angular Material selectionChanged function is providing the previous step instead of the current step

I'm currently working on storing my data in a Node.js REST API, but I keep encountering an issue with the error message "req.status is not a function"

What is the proper method for transforming an Excel column containing JSON format data into a JavaScript object?

The jQuery UI accordion fails to function properly after refreshing the data