Develop Reference

Get the contents of a td without an "id" attribute

I have the following HTML. How can I fetch the contents of the TD which is under tr class="status_visible" in JavaScript?. I have highlighted the td that I am interested in the code below. There could be multiple status_visible rows. I am only interested in the first row.
There is no id, so I can't use getElementById(). (I also can't use jQuery)
<table class="colored">
<thead>
<tr>
<th colspan="9">
<h2>History</h2>
</th>
</tr>
<tr>
<th>Value</th>
<th>Change Reason</th>
<th>Changed By</th>
<th>Changing Environment</th>
<th>Change Date (UTC)</th>
</tr>
</thead>
<tbody>
<tr class="status_visible">
<td>N</td> <!-- get this value -->
<td>CSS-ID: 343423</td>
<td>login_details</td>
<td>applicationname::signedinuser</td>
<td>2018-01-02 21:09:47 +0000</td>
</tr>
<tr class="status_hidden">
<td>Y</td>
<td>CSS-ID:5554</td>
<td>ServiceName</td>
<td></td>
<td>2014-02-19 13:37:50 +0000</td>
</tr>
</tbody>
</table>

Use document.querySelector() with this selector:
'tr.status_visible td:nth-child(n)'
… where n is the column of the td you're interested in (1-based).
For example, this will grab the text content of the first td of the tr having class "status_visible":
document.querySelector('tr.status_visible td:nth-child(1)').textContent
Snippet:
console.log(document.querySelector('tr.status_visible td:nth-child(1)').textContent);
<table class="colored">
<thead>
<tr>
<th colspan="9">
<h2>History</h2>
</th>
</tr>
<tr>
<th>Value</th>
<th>Change Reason</th>
<th>Changed By</th>
<th>Changing Environment</th>
<th>Change Date (UTC)</th>
</tr>
</thead>
<tbody>
<tr class="status_visible">
<td>N</td>
<td>CSS-ID: 343423</td>
<td>login_details</td>
<td>applicationname::signedinuser</td>
<td>2018-01-02 21:09:47 +0000</td>
</tr>
<tr class="status_hidden">
<td>Y</td>
<td>CSS-ID:5554</td>
<td>ServiceName</td>
<td></td>
<td>2014-02-19 13:37:50 +0000</td>
</tr>
</tbody>
</table>

You could loop through all the td's and show the text content using .textContent like :
var tds = document.querySelectorAll('tr.status_visible td');
for (var i = 0; i < tds.length; i++) {
console.log(tds[i].textContent);
}
var tds = document.querySelectorAll('tr.status_visible td');
for (var i = 0; i < tds.length; i++) {
console.log(tds[i].textContent);
}
<table class="colored">
<thead>
<tr>
<th colspan="9">
<h2>History</h2>
</th>
</tr>
<tr>
<th>Value</th>
<th>Change Reason</th>
<th>Changed By</th>
<th>Changing Environment</th>
<th>Change Date (UTC)</th>
</tr>
</thead>
<tbody>
<tr class="status_visible">
<td>N</td>
<td>CSS-ID: 343423</td>
<td>login_details</td>
<td>applicationname::signedinuser</td>
<td>2018-01-02 21:09:47 +0000</td>
</tr>
<tr class="status_hidden">
<td>Y</td>
<td>CSS-ID:5554</td>
<td>ServiceName</td>
<td></td>
<td>2014-02-19 13:37:50 +0000</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>

Jquery search withing the table

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

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