Develop Reference

How can I identify an element with no class/ID and won't always be the same nth child?

I've got some text displaying in a table (oldschool, I know) and I'm trying to identify that specific <td> element so I can use jQuery to wrap() <a href> tags around it and convert it to a link.
The problem is, none of the <td>'s in the table have unique classes or ID's, and there will always be an unknown amount of <td>'s before the one I want to access, so I don't think I can use nth of child.
The ONLY unique way that <td> is identifiable is the <td> DIRECTLY before it, which will contain some text that will always be the same. Can I use jQuery to find that <td> based on the text inside it, then target the <td> directly after that? Or is there a better way to do this?

You can use jQuery to fetch element that contains specific text and access the next td as required with a single line of jQuery code. This won't thrown an exception in case when there is no next td.
$(document).ready(function() {
var yourVal = $('td:contains("2.2")').next('td').text();
console.log(yourVal);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
</tr>
</tbody>
</table>

You are looking for the nextElementSibling of the <td> with unique textContent. In order to find it, loop over all the <td>s and then get the nextElementSibling of the <td> with unique textContent. And when you find it, break.
const tds = document.querySelectorAll("td")
for (let td of tds) {
if (td.innerText.includes("Larry")) {
const element = td.nextElementSibling
console.log(element.innerText)
break;
}
}
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
If you like jQuery, use this.
const td = jQuery("td:contains('Larry')").next("td").text()
console.log(td)
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>

JQuery returning number of children more than what exist

So the problem I'm having is that my jQuery code is somehow detecting more children than there exist in for an element. I'll do my best to explain what I'm trying to do.
I have a table in the following format:
<table>
<!-- BEGIN SECTION: General Attributes -->
<tbody class="tableHeadings">
<tr>
<th colspan="2">
<hr />
<h3 class="tableSectionHeader">General Characteristics</h3>
<hr />
</th>
</tr>
<tr>
<th class="library-card-header" id="venue">Venue</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="pubYear">Publication Year</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="abstract">Abstract</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="author">Authors</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="url">URL</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="researchQuestions">Research Question</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="experienceDescription">Experience Description</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="whatMeasured">What Measured</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="howMeasured">How Measured</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="articleEvaluationTool">Evaluation Tool Used</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="reportType">Report Type</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="studyDesign">Study Design</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="researchApproach">Research Approach</th>
<td></td>
</tr>
</tbody>
<tbody class="tableHeadings durationHeader">
<tr>
<th colspan="2">
<hr />
<h3 class="tableSectionHeader">Duration Information</h3>
<hr />
</th>
</tr>
<tr>
<th class="library-card-header" id="years">Total Years</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="semesters">Total Semesters</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="months">Total Months</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="weeks">Total Weeks</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="days">Total Days</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="hours">Total Hours</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="minutes">Total Minutes</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="daysPerWeek">Days Per Week</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="hoursPerDay">Hours Per Day</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="minutesPerDay">Minutes Per Day</th>
<td></td>
</tr>
</tbody>
</table>
What I'm doing is using JS to populate the td's with the relative information if it exists in the database. If it doesn't I'm removing the tr altogether so it doesn't show up at all on the page (rather than showing up with just heading and no information). The populating part is working seamlessly. However, removing the sections which have no data is not working for only the section 'duration header'.
The JS code I wrote to achieve this is:
jQuery("th").each(function(item){
var idAttribute = jQuery(this).attr("id");
var result = data[idAttribute];
if(result == undefined || result.length == 0) {
// Remove any element that has no data. Skip over the section headers.
if (idAttribute !== undefined)
jQuery(this).parent().remove();
return;
}
// Remove any duration information with a zero value.
if (isDurationAttr(idAttribute))
{
if (result === 0)
{
jQuery(this).parent().remove();
return;
}
}
jQuery('.tableHeadings').each(function() {
// console.log(jQuery(this).children().length);
if (jQuery(this).children().length == 1) {
jQuery(this).remove();
return;
}
});
var tree = jQuery(".durationHeader").map(function(){
return this.innerHTML;
}).get().join(", ");
console.log(tree);
});
While debugging this, I tried to print out the number of children in the last part and then the html that is in the durationHeader section.
the method
jQuery('.tableHeadings').each(function() {
// console.log(jQuery(this).children().length);
if (jQuery(this).children().length == 1) {
jQuery(this).remove();
return;
}
});
should essentially get rid of the durationHeader section. However, when I print out the html, its showing all the elements. For some very weird reason, this is not happening for the first tbody, which is also a class tableHeadings. When I printed out the children in durationHeader, it says that the element has 11 children. It should have only 1, which is the heading of that section.
Can someone please look into this and tell me what is going on? I've been stuck on this for 2 days now.

Look closely your first tbody has 14 tr elements while the second tbody has 11. The code is working fine. Tell me if that's not what you were looking for.
Edit: I think I know what you're not understanding: jQuery('.tableHeadings') contains two elements, the two elements with class name .tableHeadings. So when you apply each you're not looping through each child of the table portion, you're looping through each table portion (here there are two). Therefore accessing children will get you the tr elements instead of the child of the first tr: th.
jQuery('.tableHeadings').each(function() {
console.log(jQuery(this).children().length);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<!-- BEGIN SECTION: General Attributes -->
<tbody class="tableHeadings">
<tr>
<th colspan="2">
<hr />
<h3 class="tableSectionHeader">General Characteristics</h3>
<hr />
</th>
</tr>
<tr>
<th class="library-card-header" id="venue">Venue</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="pubYear">Publication Year</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="abstract">Abstract</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="author">Authors</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="url">URL</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="researchQuestions">Research Question</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="experienceDescription">Experience Description</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="whatMeasured">What Measured</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="howMeasured">How Measured</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="articleEvaluationTool">Evaluation Tool Used</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="reportType">Report Type</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="studyDesign">Study Design</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="researchApproach">Research Approach</th>
<td></td>
</tr>
</tbody>
<tbody class="tableHeadings durationHeader">
<tr>
<th colspan="2">
<hr />
<h3 class="tableSectionHeader">Duration Information</h3>
<hr />
</th>
</tr>
<tr>
<th class="library-card-header" id="years">Total Years</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="semesters">Total Semesters</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="months">Total Months</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="weeks">Total Weeks</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="days">Total Days</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="hours">Total Hours</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="minutes">Total Minutes</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="daysPerWeek">Days Per Week</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="hoursPerDay">Hours Per Day</th>
<td></td>
</tr>
<tr>
<th class="library-card-header" id="minutesPerDay">Minutes Per Day</th>
<td></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>

hide column 2nd column when row above uses rowspan

I have this table
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th></th>
<th>01/09/16</th>
<th>02/09/16</th>
<th>03/09/16</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" valign="top">In</th>
<th></th>
<td>Jack</td>
<td>Jack</td>
<td>James</td>
</tr>
<tr>
<th></th>
<td></td>
<td>Lisa</td>
<td>Jack</td>
</tr>
</tbody>
</table>
It renders like this
I want to get rid of the blank column of headers.
I've tried using this css
'th:nth-of-type(2) {display: none;}'
I got this instead
The rowspan is throwing me off. I'm willing to use a clever regex substitution or css.

I used css not selector
th:nth-of-type(2), tbody th:not([rowspan]) {display: none;}
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th></th>
<th>01/09/16</th>
<th>02/09/16</th>
<th>03/09/16</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" valign="top">In</th>
<th></th>
<td>Jack</td>
<td>Jack</td>
<td>James</td>
</tr>
<tr>
<th></th>
<td></td>
<td>Lisa</td>
<td>Jack</td>
</tr>
</tbody>
</table>

Let's get weird with it. I think :empty pseudo selector just might be what you're looking for. I don't know how different your full table structure is, but this should put you on the right path.
I placed my css on two lines for readability. You can combine as you wish.
tr > th:empty:nth-child(2){display: none;}
tr > td:empty:nth-child(2){display: none;}
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th></th>
<th>01/09/16</th>
<th>02/09/16</th>
<th>03/09/16</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" valign="top">In</th>
<th></th>
<td>Jack</td>
<td>Jack</td>
<td>James</td>
</tr>
<tr>
<th></th>
<td></td>
<td>Lisa</td>
<td>Jack</td>
</tr>
</tbody>
</table>

Here is one way to do it with jquery. This locates each <th> with a rowspan attribute and hides any immediately proceeding column.
$("table.dataframe").find("th[rowspan]").each(function() {
var index = $(this).index() + 2;
$(this).closest("table.dataframe").find('th,td').filter(":nth-child("+index+")").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" class="dataframe">
<thead>
<tr style="text-align: right;">
<th></th>
<th></th>
<th>01/09/16</th>
<th>02/09/16</th>
<th>03/09/16</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" valign="top">In</th>
<th></th>
<td>Jack</td>
<td>Jack</td>
<td>James</td>
</tr>
<tr>
<th></th>
<td></td>
<td>Lisa</td>
<td>Jack</td>
</tr>
</tbody>
</table>

You can achieve this by giving tds and ths borders then setting the first col border to 0 or none, but you gonna have to omit or set the table border to 0:
table {
border-collapse: collapse;
}
table th, td {
border: 1px solid #000;
}
table th.no-border {
border: none;
}
<table class="dataframe">
<thead>
<tr style="text-align: right;">
<th class="no-border"></th>
<th></th>
<th>01/09/16</th>
<th>02/09/16</th>
<th>03/09/16</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="2" valign="top">In</th>
<th></th>
<td>Jack</td>
<td>Jack</td>
<td>James</td>
</tr>
<tr>
<th></th>
<td></td>
<td>Lisa</td>
<td>Jack</td>
</tr>
</tbody>

is this table data dynamic?
assuming this table is fixed javascript way would be like this
it checks if your second column is blank then remove then second element of each table row
<script>
var x = document.getElementsByTagName("th");
var check = x[1].innerHTML;
if(check == "") {
var blk_0 = document.getElementsByTagName("tr")[0];
var blk_1 = document.getElementsByTagName("tr")[1];
var blk_2 = document.getElementsByTagName("tr")[2];
blk_0.removeChild(blk_0.childNodes[3]);
blk_1.removeChild(blk_1.childNodes[3]);
blk_2.removeChild(blk_2.childNodes[1]);
}
</script>
https://jsfiddle.net/3erhzcta/

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