CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ajmajmajma
ajmajmajma

Reputation: 14216

Getting certain td's to swap places

I am trying to get the effect of certain td's(not all) different tr's to swap places with the ones directly above or below them. I only want the last 3 td's not the entire row. I seem to have trouble finding something that will do JUST the 3 td's I want, not the entire row.

You can see the example I have set up here : http://codepen.io/anon/pen/qwHbz

I know you can do something like :

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

However I dont want the entire row. So if I clicked .saTableDown on the first row that has it, I would want the Target, Level, and instruction to swap with the ones below it, and so on. Ir something like this possible in jquery/javascript? I can't seem to figure it out if so. Thanks for reading!

Upvotes: 0

Views: 73

Answers (1)

Sarah
Sarah

Reputation: 754

Is this what you wanted?

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

I would find the index of the tr you have clicked up/down, and if it is not the first/last, swap it with the previous/next tr. Then swap the numbers back around. I have given the number td a class of .num, and the target td a class of .target, I assume you have access to the markup to be able to do that.

jQuery:

$('.saTableUp').click(function(){
    //find the index of the parent tr
    var parentTr = $(this).parent().parent();
    var index = parentTr.index();

    // if not the first element
    if (index > 1) {
      var parentSwap = parentTr.prev();
      //swap rows
      parentSwap.before(parentTr);
      // move one number up a row
      parentTr.children('.num').before(parentSwap.children('.num'));
      // move other number (now the second .num in the row) down a row
      parentSwap.children('.target').before(parentTr.children('.num:eq(1)'));
    }
});

$('.saTableDown').click(function(){
    //find the index of the parent tr
    var parentTr = $(this).parent().parent();
    var index = parentTr.index();

    // if not the last element
    if (index < 4) {
      var parentSwap = parentTr.next();
      //swap rows
      parentSwap.after(parentTr);
      // move one number down a row
      parentTr.children('.num').before(parentSwap.children('.num'));
      // move other number (now the second .num in the row) up a row
      parentSwap.children('.target').before(parentTr.children('.num:eq(1)'));
    }
});

Upvotes: 1

Related Questions