I have a loop where i want display tables and calculate the sum here is html
#for (int i = 0; i < 3; i++) {
<table id="table #i" class="tableSum">
<thead>
<tr>
<td>Items</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<td>Organe</td>
<td>5</td>
<td>200</td>
</tr>
<tr>
<td>Banana</td>
<td>5</td>
<td>200</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
}
In javascript i wrote this code, I want the method can sum up all data in column 2 and 3 then display on the footer of each table in a loop, but when i run this code, it returned wrong sum and only display in 1st table.
$(document).ready(function () {
$('table').each(function () {
calculateColumn(1);
calculateColumn(2);
})
});
function calculateColumn(index) {
var total = 0;
$('table tr').each(function () {
var value = parseInt($('td', this).eq(index).text());
if (!isNaN(value)) {
total += value;
}
});
$('table tfoot td').eq(index).text(total);
}
When you say $('table tr').each(), it iterates over all the tr elements in the page, not just the one's in the current table(which is targeted by $('table').each())
You need to pass the table reference to the calculate method
$(document).ready(function() {
$('table').each(function() {
calculateColumn(this, 1);
calculateColumn(this, 2);
})
});
function calculateColumn(table, index) {
var total = 0;
$(table).find('tbody td:nth-child(' + (index + 1) + ')').each(function() {
total += +$(this).text() || 0;
});
$(table).find('tfoot td').eq(index).text(total);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table1" class="tableSum">
<thead>
<tr>
<td>Items</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>6</td>
<td>100</td>
</tr>
<tr>
<td>Organe</td>
<td>6</td>
<td>150</td>
</tr>
<tr>
<td>Banana</td>
<td>3</td>
<td>75</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<table id="table1" class="tableSum">
<thead>
<tr>
<td>Items</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>5</td>
<td>120</td>
</tr>
<tr>
<td>Organe</td>
<td>4</td>
<td>100</td>
</tr>
<tr>
<td>Banana</td>
<td>5</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
<table id="table1" class="tableSum">
<thead>
<tr>
<td>Items</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>10</td>
<td>100</td>
</tr>
<tr>
<td>Organe</td>
<td>5</td>
<td>300</td>
</tr>
<tr>
<td>Banana</td>
<td>5</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
Related
I am trying to learn jQuery and JS. I want to filter the table to be the values in my arrays. The month will always be one month but the Name may have more that one name.
The results I want is:
Office
Name
Month
Quantity
1a
Abe D
Feb
13
1a
Jon R
Feb
12
$(document).ready(function(){
var names = ["Abe D", "Jon R"];
var mth = "Feb"
$("button").click(function(){
$("td:nth-child(2)").each(function(){
let tr = $(this);
let mths = tr.find('td:nth-child(3)').text();
console.log(mth + ' : ' + mths)
if(names.indexOf($(this).text()) == -1 || mths !== mth){
$(this).parent().hide();
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Office</th>
<th>Name</th>
<th>Month</th>
<th>Quantity</th>
</tr>
</thead>
<tr>
<td>1a</td>
<td>Abe D</td>
<td>Jan</td>
<td>10</td>
</tr>
<tr>
<td>1a</td>
<td>Abe D</td>
<td>Feb</td>
<td>13</td>
</tr>
<tr>
<td>1a</td>
<td>Jon R</td>
<td>Jan</td>
<td>9</td>
</tr>
<tr>
<td>1a</td>
<td>Jon R</td>
<td>Feb</td>
<td>12</td>
</tr>
<tr>
<td>2b</td>
<td>Eve C</td>
<td>Jan</td>
<td>13</td>
</tr>
<tr>
<td>2b</td>
<td>Eve C</td>
<td>Feb</td>
<td>14</td>
</tr>
</table>
<button>Filter</button>
How do I get the filter working?
You already appear to have the logic to retrieve the name and month from each row of the table. Therefore to reach your goal all you need to do is use the includes() method on the array to determine if the current name exists within it, and a straight string comparison of the month names.
I would suggest doing this comparison on the tr, not the child td, as it makes the logic to hide()/show() them much more straightforward:
jQuery($ => {
const names = ["Abe D", "Jon R"];
const mth = "Feb"
$("button").click(function() {
$('tbody tr').hide().filter((i, tr) => {
const $tr = $(tr);
const name = $tr.children('td:nth-child(2)').text().trim();
const month = $tr.children('td:nth-child(3)').text().trim();
return names.includes(name) && month === mth;
}).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Office</th>
<th>Name</th>
<th>Month</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1a</td>
<td>Abe D</td>
<td>Jan</td>
<td>10</td>
</tr>
<tr>
<td>1a</td>
<td>Abe D</td>
<td>Feb</td>
<td>13</td>
</tr>
<tr>
<td>1a</td>
<td>Jon R</td>
<td>Jan</td>
<td>9</td>
</tr>
<tr>
<td>1a</td>
<td>Jon R</td>
<td>Feb</td>
<td>12</td>
</tr>
<tr>
<td>2b</td>
<td>Eve C</td>
<td>Jan</td>
<td>13</td>
</tr>
<tr>
<td>2b</td>
<td>Eve C</td>
<td>Feb</td>
<td>14</td>
</tr>
</tbody>
</table>
<button>Filter</button>
The .each() loop should loop over rows.
Then use .find() to get the name and month fields from the row. Test them and hide the row if they don't match.
$(document).ready(function() {
var names = ["Abe D", "Jon R"];
var mth = "Feb";
$("button").click(function() {
$("tbody tr").show(); // show everything before filtering
$("tbody tr").each(function() {
let tr = $(this);
let mths = tr.find('td:nth-child(3)').text();
let name = tr.find('td:nth-child(2)').text();
if(!names.includes(name) || mths !== mth) {
$(this).hide();
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Office</th>
<th>Name</th>
<th>Month</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>1a</td>
<td>Abe D</td>
<td>Jan</td>
<td>10</td>
</tr>
<tr>
<td>1a</td>
<td>Abe D</td>
<td>Feb</td>
<td>13</td>
</tr>
<tr>
<td>1a</td>
<td>Jon R</td>
<td>Jan</td>
<td>9</td>
</tr>
<tr>
<td>1a</td>
<td>Jon R</td>
<td>Feb</td>
<td>12</td>
</tr>
<tr>
<td>2b</td>
<td>Eve C</td>
<td>Jan</td>
<td>13</td>
</tr>
<tr>
<td>2b</td>
<td>Eve C</td>
<td>Feb</td>
<td>14</td>
</tr>
</tbody>
</table>
<button>Filter</button>
In html I have my markup is like this
<table class="section-table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
I want to add a class for each last tbody after thead. So basically my output should be like this
<table class="section-table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody class="last-row">
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody class="last-row">
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody class="last-row">
<tr>
<td></td>
</tr>
</tbody>
</table>
I have tried this code but its not working at all.
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).nextAll('tbody').last().addClass('last-row');
});
You can add that class to all tbody before thead and then add same class to last tbody
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
jQuery('table.section-table').find('tbody').last().addClass('last-row');
Demo
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
jQuery('table.section-table').find('tbody').last().addClass('last-row');
.last-row
{
background-color:#ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th>12</th>
</tr>
</thead>
<tbody>
<tr>
<td>312</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>rftg</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>g</th>
</tr>
</thead>
<tbody>
<tr>
<td>345</td>
</tr>
</tbody>
</table>
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
$('table.section-table tbody:last-child').addClass('last-row');
.section-table tbody{
background-color:#F00;
}
.section-table tbody.last-row{
background-color:#FF0;
}
.section-table td{
height:30px;
width:30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
Try prev('tbody'), since you don't have thead at the end, you need to add tbody:last-child as well.
You can first add the class to all the <tbody> that is just a previous element of the <thead>. Using this will leave you with the last <tbody> unchanged in the HTML table so you should add one more line of JQuery that will add class to this remaining last <tbody>.
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).prev('tbody').addClass('last-row');
});
$('table.section-table tbody').last().addClass('last-row');
.last-row{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th>0</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
</tbody>
<tbody>
<tr>
<td>2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>3</td>
</tr>
</tbody>
<tbody>
<tr>
<td>4</td>
</tr>
</tbody>
<tbody>
<tr>
<td>5</td>
</tr>
</tbody>
<tbody>
<tr>
<td>6</td>
</tr>
</tbody>
<tbody>
<tr>
<td>7</td>
</tr>
</tbody>
<thead>
<tr>
<th>8</th>
</tr>
</thead>
<tbody>
<tr>
<td>9</td>
</tr>
</tbody>
<tbody>
<tr>
<td>10</td>
</tr>
</tbody>
<thead>
<tr>
<th>1</th>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
</tr>
</tbody>
</table>
You can use .nextUntil() to target all siblings till <THEAD> is encountered then use .last() to get the desired element and add class.
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).nextUntil('thead').last().addClass('last-row');
});
jQuery('table.section-table').find('thead').each(function() {
jQuery(this).nextUntil('thead').last().addClass('last-row');
});
.last-row {
background-color: #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="section-table">
<thead>
<tr>
<th>HEAD 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>312</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>HEAD 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<tbody>
<tr>
<td>45</td>
</tr>
</tbody>
<thead>
<tr>
<th>HEAD 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>345</td>
</tr>
</tbody>
</table>
I am searching in my table with a function:
//search field for table
$("#search_field").keyup(function() {
var value = this.value;
$("#menu_table").find("tr").each(function(index) {
if (index === 0) return;
var id = $(this).find("td").text();
$(this).toggle(id.indexOf(value) !== -1);
});});
Fourth coulmn of data is Type i.e. Chicken, Kebabs etc.
I want to search only in those rows whose 4th column contains ('Chicken'). It should not search in rows whose Type is 'Kebabs'. The code above is searching in all rows.
You can filter the rows and apply your code only to the filtered row like in:
$('#menu_table tr:gt(0)').filter(function(idx, ele) {
return $(ele).find('td:eq(3)').text() == 'Chicken';
}).each(function(index, ele) {
var id = $(this).find("td").text();
$(this).toggle(id.indexOf(value) !== -1);
});
Another way to filter is based on :nth-child() Selector:
$('#menu_table tr:gt(0) td:nth-child(4)').filter(function(idx, ele) {
return ele.textContent == 'Chicken';
}).closest('tr').each(function(index, ele) {
var id = $(this).find("td").text();
$(this).toggle(id.indexOf(value) !== -1);
});
$('#menu_table tr:gt(0) td:nth-child(4)').filter(function(idx, ele) {
return ele.textContent == 'Chicken';
}).closest('tr').each(function(index, ele) {
var id = $(this).find("td:first").text();
var typ = $(this).find("td:eq(3)").text();
console.log('ID:' + id + ' Type: ' + typ);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="menu_table">
<thead>
<tr>
<th class="centerText" data-field="item_id">ID</th>
<th class="centerText" data-field="name">Name</th>
<th class="centerText" data-field="price">Price</th>
<th class="centerText" data-field="type">Type</th>
<th class="centerText" data-field="image">Image</th>
<th class="centerText" data-field="description">Description</th>
<th class="centerText" data-field="cooking">Instructions</th>
<th class="centerText" data-field="ingredients">Ingredients</th>
<th class="centerText" data-field="warnings">Warnings</th>
<th class="centerText" data-field="Storage">Storage</th>
<th class="centerText" data-field="Size">Size</th>
<th class="centerText" data-field="edit">Edit</th>
<th class="centerText" data-field="delete">Delete</th>
</tr>
</thead>
<tbody style="text-align:center;" id="menu_table_data">
<tr>
<td>1</td>
<td>name</td>
<td>price</td>
<td>type</td>
<td>image</td>
<td>description</td>
<td>instruction</td>
<td>ingredients</td>
<td>warnings</td>
<td>storage</td>
<td>size</td>
<td>edit</td>
<td>delete</td>
</tr>
<tr>
<td>2</td>
<td>name</td>
<td>price</td>
<td>type</td>
<td>image</td>
<td>description</td>
<td>instruction</td>
<td>ingredients</td>
<td>warnings</td>
<td>storage</td>
<td>size</td>
<td>edit</td>
<td>delete</td>
</tr>
<tr>
<td>3</td>
<td>name</td>
<td>price</td>
<td>not Chicken</td>
<td>image</td>
<td>description</td>
<td>instruction</td>
<td>ingredients</td>
<td>warnings</td>
<td>storage</td>
<td>size</td>
<td>edit</td>
<td>delete</td>
</tr>
<tr>
<td>4</td>
<td>name</td>
<td>price</td>
<td>Chicken</td>
<td>image</td>
<td>description</td>
<td>instruction</td>
<td>ingredients</td>
<td>warnings</td>
<td>storage</td>
<td>size</td>
<td>edit</td>
<td>delete</td>
</tr>
</tbody>
</table>
Use jQuery :contains(text) selector.
$("#menu_table").find("tr:contains('Chicken')").each(function(index) {
if($(this).children('td').eq(3).text() == "Chicken"){
/* Do something */
}
});
Working example: https://jsfiddle.net/kvvnjmup/4/
$('#menu_table').find('tr:contains("Chicken")').each(function(){
if($(this).children('td').eq(3).text() == "Chicken"){
alert($(this).prop('id'));
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="menu_table">
<tbody><tr id="1">
<td></td>
<td></td>
<td></td>
<td>Chicken</td>
<td></td>
</tr>
<tr id="2">
<td></td>
<td></td>
<td></td>
<td>Chicken</td>
<td></td>
</tr>
<tr id="3">
<td></td>
<td></td>
<td></td>
<td>pasta</td>
<td></td>
</tr>
<tr id="4">
<td></td>
<td></td>
<td>Chicken</td>
<td>pasta</td>
<td></td>
</tr>
</tbody>
</table>
In a function I need to pass a arr. I want to remove all columns of html table.
Not sure how to do this.
I tried this, but not working:
<table>
<thead>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</thead>
<tbody>
<tr>
<td>a1</td>
<td>b1</td>
<td>c1</td>
<td>d1</td>
<td>e1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
<td>d2</td>
<td>e2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
<td>d3</td>
<td>e3</td>
</tr>
</tbody>
</table>
and in javascript I have a variable:
var arr=[0,2,3];
I want to remove all columns and its data from table on specified so output will be:
<table>
<thead>
<tr>
<td>b</td>
<td>e</td>
</tr>
</thead>
<tbody>
<tr>
<td>b1</td>
<td>e1</td>
</tr>
<tr>
<td>b2</td>
<td>e2</td>
</tr>
<tr>
<td>b3</td>
<td>e3</td>
</tr>
</tbody>
</table>
You can use the array to create a filter for tds to be deleted as given below
var arr = [0, 2, 3];
var filters = arr.map(function(val) {
return 'td:nth-child(' + (val + 1) + ')';
});
$('table').find(filters.join()).remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
</thead>
<tbody>
<tr>
<td>a1</td>
<td>b1</td>
<td>c1</td>
<td>d1</td>
<td>e1</td>
</tr>
<tr>
<td>a2</td>
<td>b2</td>
<td>c2</td>
<td>d2</td>
<td>e2</td>
</tr>
<tr>
<td>a3</td>
<td>b3</td>
<td>c3</td>
<td>d3</td>
<td>e3</td>
</tr>
</tbody>
Fiddle Example
I have two example tables with subject titles in the first cells.
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 1</th>
<th>Person 2</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>18</td>
<td>23</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Clerk</td>
<td>Policeman</td>
</tr>
</tbody>
</table>
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 3</th>
<th>Person 4</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>17</td>
<td>46</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Student</td>
<td>Firefighter</td>
</tr>
</tbody>
</table>
I've made the first child of th and td unsortable since they are titles. Is there any way to move other columns, one at a time (td:nth-child,th:nth-child), to the other table using jQueryUI sortable?
How can I make a whole column sortable in the change or start event?
Here's my expected output:
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 1</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>18</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Clerk</td>
</tr>
</tbody>
</table>
<table class='sort connect'>
<thead>
<tr>
<th class='ui-state-disabled'></th>
<th>Person 3</th>
<th>Person 2</th> // sorted
<th>Person 4</th>
</tr>
</thead>
<tbody>
<tr>
<td class='ui-state-disabled'>Age</td>
<td>17</td>
<td>23</td> //sorted
<td>46</td>
</tr>
<tr>
<td class='ui-state-disabled'>Job</td>
<td>Student</td>
<td>Policeman</td> //sorted
<td>Firefighter</td>
</tr>
</tbody>
</table>
JS code:
var fixHelperModified = function(e, tr) {
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function(index)
{
$(this).width($originals.eq(index).width())
});
return $helper;
};
$(function() {
$( ".sort" ).sortable({
change: function( event, ui ) {
var see = ui.item.index();
console.log(see);
$(this).find('td:nth-child(see),th:nth-child(see)')
},
helper: fixHelperModified,
cancel: ".ui-state-disabled",
connectWith: ".connect"
}).disableSelection();
});
What about something like this?
It's a workaround for what you're asking, but it does basically the same thing, just fix the styling, spaces, etc. as you'd like
HTML
<div class="sortableContainer sort connect">
<div>
<table>
<thead>
<tr>
<td height="20px"></td>
</tr>
</thead>
<tbody>
<tr>
<td>Age</td>
</tr>
<tr>
<td>Job</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 1</td>
</tr>
</thead>
<tbody>
<tr>
<td>18</td>
</tr>
<tr>
<td>Clerk</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>23</td>
</tr>
<tr>
<td>Policeman</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="sortableContainer sort connect">
<div>
<table>
<thead>
<tr>
<td height="20px"></td>
</tr>
</thead>
<tbody>
<tr>
<td>Age</td>
</tr>
<tr>
<td>Job</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 3</td>
</tr>
</thead>
<tbody>
<tr>
<td>17</td>
</tr>
<tr>
<td>Student</td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<thead>
<tr>
<td>Person 4</td>
</tr>
</thead>
<tbody>
<tr>
<td>46</td>
</tr>
<tr>
<td>Firefighter</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS
td, th {
border:1px solid #222
}
.red {
background:red
}
.ui-state-disabled {
opacity:1
}
.sortableContainer>div {
display:inline-block;
}
table {
border-spacing:0px;
border-collapse:collapse;
}
JS
$(function () {
$(".sort").sortable({
connectWith: ".connect"
}).disableSelection();
});