I'd like to do a small function that would permute 2 cells of a table with jQuery (or PHP/Ajax). Let's say I have the following table:
<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>
How to select 2 cells and permute them?
EDIT:
I made my way through the function thanks to your advice, nevertheless. It is working the first time bug I got a weird bug coming from the c1 c2 c3 variables, I don't know why, could anyone help me to finish my function please?
Here is my Javascript: (it is wrapped in a doc ready)
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();
and here is a sample: http://jsbin.com/exesof/2/edit
Try this code:
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;
}
});
Working example you can try here: http://jsbin.com/irapeb/3/edit
Click one of the cells, than another one and see they are switched :)
This can be done in pure javascript:
Now it's up to you to write the script.
This code will move the 4th td (referenced as cell[3]) on place of the first cell (cell[0]) in the first row (and the 1st becomes the 4th):
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);
I wrote this function to simplify process. It uses native table methods.
Modifying the number of row (:nth-child(1)) and indexes of the table cells you can permute them as you need.
with jQuery, you can do it with:
$(document).ready(function() {
$("table.table tbody tr td:first-child").each(function(index, element) {
// this and element is the same
$(this).insertAfter($(this).next());
});
});
Assuming you don't ommited the tbody element (which is automatically added by some browser as default behaviour)
If you want to do the process when clicking on the first cell, you just have to use on with click event instead of each.
$(document).ready(function() {
$("table.table tbody tr td:first-child").on('click', function(clickEvent) {
$(this).insertAfter($(this).next());
});
});