Как переставить 2 ячейки таблицы

Question

Я хотел бы сделать небольшую функцию, которая переместила бы 2 ячейки таблицы с помощью jQuery (или PHP/Ajax). Скажем, у меня есть следующая таблица:

<table class="table"> 
    <tr> 
     <td class="btn" data-cellN="1"> 
      01 
     </td> 
     <td class="btn" data-cellN="2"> 
      02 
     </td>   
    </tr> 

    <tr> 
     <td class="btn" data-cellN="3"> 
      05 
     </td> 
     <td class="btn" data-cellN="4"> 
      06 
     </td> 
    </tr> 
</table> 

Как выбрать 2 клетки и переставить их?

EDIT:

Я сделал свой путь через функцию, благодаря вашим советам, тем не менее. Он работает в первый раз, когда у меня возникла странная ошибка, возникающая из переменных c1 c2 c3, я не знаю почему, может ли кто-нибудь помочь мне закончить мою функцию, пожалуйста?

Вот мой Javascript: (он обернут в документ готов)

 var nbbuttonclicked=0; // to trigger the movecell function after the second button was clicked 
     var count=0; //Number of tinme we moved a cell 

     var table = { 

      c1:null, 
      c2:null, 
      c3:null, 

      check: function(){ 
       $('td').on('click', function(){ //When the user click on a button we verify if he already clicked on this button 

        if($(this).hasClass('btn-info')) { 

         //If yes, then remove the class and variable c1 
         $(this).removeClass('btn-info'); 
         table.c1=0; 
         nbbuttonclicked--; 

        }else{ 
         //if no, then add a class to show him it is clicked and remember the value of the cell 
         $(this).addClass('btn-info'); 
         if(typeof table.c1 === 'undefined' || table.c1===null) { 
          table.c1 = $(this); 
          console.log('c1:'+table.c1.html()); 
         }else{ 
          table.c2 = $(this); 
          console.log('c2:'+table.c2.html()); 
         } 

         nbbuttonclicked++; 

         if(nbbuttonclicked==2) { 
          table.movecell(table.c1,table.c2); // we trigger the function to permute the values 
         } 
        } 
       }); 
      }, 

      movecell: function(c1, c2){ 
       //We reset that variable for the next move 
       nbbuttonclicked=0; 

       //we move the cells 
       table.c3=c1.html(); 
       c1.html(c2.html()); 
       c2.html(table.c3) 

       c1.removeClass('btn-info'); 
       c2.removeClass('btn-info'); 
       table.c1=table.c2=table.c3=c1=c2=null; 

      }, 

      // movecell: function(c1, c2){ 
       // We check if the cells.html() are = to data-cellN. If yes, you won 
       // foreach() 
      // }, 

      // var row = $('table tr:nth-child(1)')[0]; 
      // moveCell(row, 0, 3); 
     }; 
     table.check(); 

и вот пример: http://jsbin.com/exesof/2/edit

Answer 1

Попробуйте этот код:

var cell0, 
    cell1, 
    next, 
    row0, 
    row1; 

$('td').on('click', function() { 
    if(!cell0) { 
    cell0 = this; 
    row0 = cell0.parentNode; 
    return; 
    } else if(!cell1) { 
    cell1 = this; 
    row1 = cell1.parentNode; 

    // === Switch cells === 
    next = cell0.nextSibling; 
    row1.insertBefore(cell0, cell1); 
    row0.insertBefore(cell1, next); 
    // ==================== 

    row0 = row1 = cell0 = cell1 = next = null; 
    } 
}); 

Рабочий пример можно попробовать здесь: http://jsbin.com/irapeb/3/edit

Нажмите один из ячеек, чем другой, и видеть, что они переключаются :)

Answer 2

Это может быть сделано в чистом JavaScript:

1. Fetch щелкнул кол-во продаж;
2. Извлечение данных обеих ячеек, когда они выбраны;
3. Замените значения ячеек на противоположные;
4. Сохраните новые значения в БД через вызов ajax.

Теперь вам решать написать сценарий.

Answer 3

Этот код будет двигаться 4-й td (ссылка в cell[3]) на месте первой ячейки (cell[0]) в первой строке (и 1-й становится 4-й):

function moveCell(row, c1, c2) { 
    var cell = row.cells; 
     arr = [c1, c2].sort(), 
     c1 = arr[1], 
     c2 = arr[0]; 
    row.insertBefore(row.insertBefore(cell[c1], cell[c2]).nextSibling, cell[c1].nextSibling); 
} 

var row = $('table tr:nth-child(1)')[0]; 
moveCell(row, 0, 3); 

http://jsfiddle.net/2N2rS/3/

Я написал эту функцию для упрощения процесса. Он использует собственные методы таблицы.

Изменение количества строк (:nth-child(1)) и индексов ячеек таблицы, которые вы можете переставить их по мере необходимости.

Answer 4

с JQuery, вы можете сделать это с:

$(document).ready(function() { 

    $("table.table tbody tr td:first-child").each(function(index, element) { 
    // this and element is the same  
    $(this).insertAfter($(this).next()); 
    }); 

}); 

Предполагая, что вы не в TBODY опущен элемент (который автоматически добавляется какой-то браузер, как поведение по умолчанию)

working example

Если вы хотите сделать этот процесс, щелкнув по первой ячейке, вам просто нужно использовать on с событием click вместо каждого.

$(document).ready(function() { 

    $("table.table tbody tr td:first-child").on('click', function(clickEvent) { 
     $(this).insertAfter($(this).next()); 
    }); 

});