Jquery search withing the table - javascript

Hi I need to search using the jquery within a table. But the issue is the my code is searching only the first element of all rows instead of searching whole table and show result. How can i search the whole table?
Here is my jquery code
$("#search").on("keyup", function() {
var value = $(this).val();
$(".table tr").each(function(index) {
if (index !== 0) {
$row = $(this);
var id = $row.find("td").text();
if (id.indexOf(value) !== 0) {
$row.hide();
</td>');
}
else {
$row.show();
}
}
});
});
Here is my html Table:
<input type="text" class="form-control" name="search" id="search" placeholder="Search Records">
<table class="table table-bordered table-striped" id="employees">
<thead>
<tr>
<th>No</th>
<th>Type</th>
<th>Name</th>
<th>Temp Address</th>
<th>Permanent Address</th>
<th>Mobile</th>
<th>Home</th>
<th>Update</th>
</tr>
</thead>
<tbody><tr>
<td>27006</td>
<td>Fixer</td>
<td>Sam</td>
<td>testing address</td>
<td></td>
<td>123456</td>
<td>123456</td>
</tr>
</tbody>
<tbody><tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>


Try this -
$("#search").keyup(function(){
_this = this;
$.each($("#employees tbody tr"), function() {
if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
$(this).hide();
else
$(this).show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" name="search" id="search" placeholder="Search Records">
<table class="table table-bordered table-striped" id="employees">
<thead>
<tr>
<th>No</th>
<th>Type</th>
<th>Name</th>
<th>Temp Address</th>
<th>Permanent Address</th>
<th>Mobile</th>
<th>Home</th>
<th>Update</th>
</tr>
</thead>
<tbody>
<tr>
<td>27006</td>
<td>Fixer</td>
<td>Sam</td>
<td>testing address</td>
<td></td>
<td>123456</td>
<td>123456</td>
</tr>
</tbody>
<tbody><tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
Thanks

Related

Javascript show more button in table

I need to show another tbody of table on Click. I have following table which is in foreach so there will be multiple buttons.:
<table class="table" id="call-table">
<tr>
<th>Show more buttons</th>
</tr>
<tbody>
<tr>
<td class="show-more-button">Show more</td> //It will open first tbody
<tr>
<tr>
<td class="show-more-button">Show more</td> //It will open second tbody
<tr>
<tbody class="show-more"> //First tbody
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some data....</td>
<td>A value..</td>
</tr>
</tbody>
<tbody class="show-more"> //Second tbody
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some more data....</td>
<td>Another value..</td>
</tr>
</tbody>
</tbody>
I'm using python with DjangoFramework. And that's the script i came up with. But it only works for changing the 's text but doesn't show the tbody.
<script>
$(document).on("click", ".show-more-button", function() {
if ($(this).text() == "Show more") {
$(this).text("Show less");
$(this).parent().children(".show-more").style.display = "block";
} else {
$(this).text("Show more");
$(this).parent().children(".show-more").style.display = "block";
}
});
</script>
and in CSS:
.show-more {
display: none;
}
What error do i have in my script?

Because $(this).parent() will be <tr>. For example you might use closest and find first parent table and there will be able using .children('.show-more'). See an example below.
$(document).on("click", ".show-more-button", function() {
if ($(this).text() == "Show more") {
$(this).text("Show less");
$(this).closest('table').children(".show-more").css('display', 'block');
} else {
$(this).text("Show more");
$(this).closest('table').children(".show-more").css('display', 'none');
}
});
.show-more { display: none; }
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tr>
<td class="show-more-button">Show more</td>
<tr>
<tbody class="show-more">
<tr>
<td>John</td>
<td>Doe</td>
<td>27</td>
</tr>
<tr>
<td>Alice</td>
<td>Lo</td>
<td>43</td>
</tr>
<tr>
<td>Linda</td>
<td>Morrison</td>
<td>45</td>
</tr>
</tbody>
</table>
Example changed and i prepared new solution.
$(document).on("click", ".show-more-button", function() {
var forId = $(this).data('more-for');
var $showMoreElement = $(this).closest('table').children('.show-more[data-more-id="' + forId + '"]');
if ($(this).text() == "Show more") {
$(this).text("Show less");
$showMoreElement.css('display', 'block');
} else {
$(this).text("Show more");
$showMoreElement.css('display', 'none');
}
});
.show-more {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="call-table">
<tr>
<th>Show more buttons</th>
</tr>
<tbody>
<tr>
<!--It will open first tbody -->
<td class="show-more-button" data-more-for="1">Show more</td>
</tr>
<tr>
<!--It will open second tbody -->
<td class="show-more-button" data-more-for="2">Show more</td>
</tr>
</tbody>
<!--First tbody -->
<tbody class="show-more" data-more-id="1">
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some data....</td>
<td>A value..</td>
</tr>
</tbody>
<!--Second tbody-->
<tbody class="show-more" data-more-id="2">
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some more data....</td>
<td>Another value..</td>
</tr>
</tbody>
</table>

Here two ways. Choose anyone. It works well:
$(function(){
$('.show-more-button').click(function(){
var b_id = $(this).data('id');
var b_text = $(this).text() == "Show more" ? "Show less" : "Show more";
$(this).text(b_text);
$('.shm'+b_id).toggle();
});
$('.show-more-button2').click(function(){
var b_id = $(this).data('id');
var b_text = $(this).text() == "Show more" ? "Show less" : "Show more";
$(this).text(b_text);
$('.shm'+b_id+'_2').toggle();
th_sh();
});
})
function th_sh(){
var o = 0;
$('#call-table2').find('.shows').each(function(){
var u = $(this).css('display') == 'table-row' ? 1 : 0;
o = o + u;
});
o>0 ? $('.th_disp').css('display','block') : $('.th_disp').css('display','none');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="call-table">
<thead>
<tr>
<th>Show more buttons</th>
<th></th>
</tr>
</thead>
<tr>
<td class="show-more-button" data-id="1">Show more</td> <!--//It will open first tbody-->
<td></td>
<tr>
<tr>
<td class="show-more-button" data-id="2">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tr>
<td class="show-more-button" data-id="3">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tbody>
<!--<tbody class="show-more"> //First tbody-->
<tr class="shm1" style="display:none;">
<th scope="col">Data1</th>
<th scope="col">Value</th>
</tr>
<tr class="shm1" style="display:none;">
<td>Some data..1..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm2" style="display:none;">
<th scope="col">Data2</th>
<th scope="col">Value</th>
</tr>
<tr class="shm2" style="display:none;">
<td>Some data..2..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm3" style="display:none;">
<th scope="col">Data3</th>
<th scope="col">Value</th>
</tr>
<tr class="shm3" style="display:none;">
<td>Some data..3..</td>
<td>A value..</td>
</tr>
</tbody>
</table>
<br><hr><br>
<table class="table table-striped" id="call-table2">
<thead>
<tr>
<th>Show more buttons</th>
<th></th>
</tr>
</thead>
<tr>
<td class="show-more-button2" data-id="1">Show more</td> <!--//It will open first tbody-->
<td></td>
<tr>
<tr>
<td class="show-more-button2" data-id="2">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tr>
<td class="show-more-button2" data-id="3">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tbody>
<!--<tbody class="show-more"> //First tbody-->
<tr class="th_disp" style="display:none;">
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr class="shm1_2 shows" style="display:none;">
<td>Some data..1..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm2_2 shows" style="display:none;">
<td>Some data..2..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm3_2 shows" style="display:none;">
<td>Some data..3..</td>
<td>A value..</td>
</tr>
</tbody>
</table>

How to search data from multiple table through jQuery

I have three different tables and I want to search for data in them. In this task I successfully searched data but when I search data of one of the table remaining two tables are also being searched. Can anyone help to search data according to the respect of their, Like when I searched data of the first table that time it should give me only data of the first table.
<html>
<head>
<script src="jquery-3.3.1.js"></script>
<script>
function SearchTable()
{
$(document).ready(function(){
$("#myInput, #yourInput, #ourInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
debugger;
$("#myTable tr,#yourTable tr,#ourTable tr").filter(function() {
debugger;
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
}
SearchTable();
</script>
</head>
<body>
<input type="text" id="myInput" placeholder="Search" title="Type">
<br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>Enesh</td>
<td>eneshpal#gmail.com</td>
<td>123456789</td>
</tr>
<tr>
<td>Ramesh</td>
<td>palenesh#gmail.com</td>
<td>174125896</td>
</tr>
<tr>
<td>Suresh</td>
<td>suresh#gmail.com</td>
<td>987654123</td>
</tr>
</tbody>
</table>
<hr>
<input type="text" id="yourInput" placeholder="Search" title="Type">
<br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody id="yourTable">
<tr>
<td>Rakesh</td>
<td>rakes#gmail.com</td>
<td>00014151</td>
</tr>
<tr>
<td>Naval</td>
<td>Naval#gmail.com</td>
<td>1234567879</td>
</tr>
<tr>
<td>Rohit</td>
<td>rohit#gmail.com</td>
<td>123456</td>
</tr>
</tbody>
</table>
<hr>
<input type="text" id="ourInput" placeholder="Search" title="Type">
<br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody id="ourTable">
<tr>
<td>Shubham</td>
<td>Shubham#gmail.com</td>
<td>023456789</td>
</tr>
<tr>
<td>pal</td>
<td>palenesh#gmail.com</td>
<td>111125896</td>
</tr>
<tr>
<td>Suresh</td>
<td>suresh#gmail.com</td>
<td>987654123</td>
</tr>
</tbody>
</table>
</body>
</html>

//put the document ready around your whole logic, not inside the method
$(document).ready(function() {
function SearchTable() {
//bind on all your different inputs
$("#myInput, #yourInput, #ourInput").on("keyup", function() {
//get the input value, trimmed, and lowercased
var value = this.value.trim().toLowerCase();
//get the associated table
var $table = $("#"+ this.getAttribute('data-target'));
//show all the rows to "undo" previous filtering
$table.find('tr').show();
//only filter if the value is not blank
if (value) {
//find all the rows that do not match the filter, and hide them
$table.find('tr').filter(function(){
return this.innerText.toLowerCase().indexOf(value) < 0;
}).hide();
}
});
}
SearchTable();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myInput" placeholder="Search" title="Type" data-target="myTable">
<br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>Enesh</td>
<td>eneshpal#gmail.com</td>
<td>123456789</td>
</tr>
<tr>
<td>Ramesh</td>
<td>palenesh#gmail.com</td>
<td>174125896</td>
</tr>
<tr>
<td>Suresh</td>
<td>suresh#gmail.com</td>
<td>987654123</td>
</tr>
</tbody>
</table>
<hr>
<input type="text" id="yourInput" placeholder="Search" title="Type" data-target="yourTable">
<br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody id="yourTable">
<tr>
<td>Rakesh</td>
<td>rakes#gmail.com</td>
<td>00014151</td>
</tr>
<tr>
<td>Naval</td>
<td>Naval#gmail.com</td>
<td>1234567879</td>
</tr>
<tr>
<td>Rohit</td>
<td>rohit#gmail.com</td>
<td>123456</td>
</tr>
</tbody>
</table>

How to limit table search to specific rows that contain specific text in a column

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>

HTML table with rowspan reorder item drag and drop issue

my html code is
<table border='1px' id='sort'>
<thead>
<tr>
<th>SL</th>
<th>Sub Group</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan='3'>1</td>
<td rowspan='3'>Fruit</td>
<td>Mango</td>
</tr>
<tr>
<td>Orange</td>
</tr>
<tr>
<td>pineapple</td>
</tr>
<tr>
<td rowspan='2'>2</td>
<td rowspan='2'>Flower</td>
<td>Rose</td>
</tr>
<tr>
<td>sunflower</td>
</tr>
</tbody>
</table>
and js
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;
},
updateIndex = function(e, ui) {
$('td.index', ui.item.parent()).each(function (i) {
$(this).html(i + 1);
});
};
$("#sort tbody").sortable({
helper: fixHelperModified,
stop: updateIndex
}).disableSelection();
I want to reorder only subgroup like fruit mango,orange or sunflower,rose not the main group in the table.
The working fiddle is http://jsfiddle.net/p6c814o6/. How to solve this issue. Thank you.

Try this:
I have updated your fiddle JsFiddle. Your html was wrong according to your code. You must check your new html.
Instead Of using rowspans you must go with nested tables to achieve it.
<table border='1px' id='sort'>
<thead>
<tr>
<th>SL</th>
<th>Sub Group</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td >1</td>
<td >Fruit</td>
<td><table>
<tr>
<td>Mango</td>
</tr>
<tr>
<td>Orange</td>
</tr>
<tr>
<td>pineapple</td>
</tr></td>
</tr>
</table>
<tr>
<td >2</td>
<td >Flower</td>
<td><table>
<tr>
<td>
Rose
</td>
</tr>
<tr>
<td>sunflower</td>
</tr>
</table>
</td>
</tbody>
</table>
Check out the updated fiddle. If this is what you need.
Hope this helps JsFiddleUpdated

move a column ,including th, between tables in jQueryUI sortable

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();
});

Categories

Resources