Develop Reference

Remove empty tbody using JQuery

I have a lot of <tr class="form-items"> items inside my HTML code and I want to remove those tr's where <tbody> tag is empty.
I've tried $("tbody:empty").closest('.form-items').remove() but it is not the good solution.
<tr class="form-items">
<td colspan="3" class="forms-group">
<table class="from-item-category">
<tbody>
</tbody>
</table>
</td>
</tr>
<tr class="form-items">
<td colspan="3" class="forms-group">
<table class="from-item-category">
<tbody>
<tr class="form-item-row">
<td class="fill-form">
<a>test #1</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>

:empty: Select all elements that have no children (including text nodes).
In your case you have text nodes. Hence your selector cannot work.
Use this other approach (a tbody with no rows):
$("tbody:not(:has(tr))")
The snippet:
$("tbody:not(:has(tr))").closest('.form-items').remove();
console.log($('table')[0].outerHTML)
.as-console {
height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class="form-items">
<td colspan="3" class="forms-group">
<table class="from-item-category">
<tbody>
</tbody>
</table>
</td>
</tr>
<tr class="form-items">
<td colspan="3" class="forms-group">
<table class="from-item-category">
<tbody>
<tr class="form-item-row">
<td class="fill-form">
<a>test #1</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>

Search for first element in DOM, if exists and child contents of are empty then remove it, if not exit the loop.
console.log('Before deletion', document.body.innerHTML)
while (true) {
var elem = document.getElementsByTagName('tbody')[0];
if (elem && !elem.innerHTML.trim()) {
elem.parentNode.removeChild(elem);
} else {
break
}
}
console.log('After deletion', document.body.innerHTML)
or even better approach get all elements first then loop through them.
const tbodyElements = document.getElementsByTagName('tbody')
for (let i = 0; i < tbodyElements.length; i++) {
if (!tbodyElements[i].innerHTML.trim()) {
tbodyElements[i].parentNode.removeChild(tbodyElements[i]);
}
}

How to find find value in table cell value with jquery

I have a table html code that comes from out source via ajax like this:
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>
I want to get value of country value in this html. Jquery nth-child can find but I could not find. I find nht tr item but can not find value ("abc") of country.

Not sure what you want to do with it, but if you want to get the second td of a tr that contains Country, use the following $("table tr:contains(Country) td:eq(1)").text()
Demo
var text = $("table tr:contains(Country) td:eq(1)").text();
console.log(text)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>

let country = document.querySelectorAll("tr")[1].querySelectorAll("td")[1].innerText;
document.querySelectorAll("tr")[1] (second tr)
.querySelectorAll("td")[1] (second td in second tr)
.innerText (gets value)

How about following selector:
$( "table.stripped tr:nth-child(2) td:nth-child(2)" ).val();

The only real reference point besides nth-child is your text headings.
Since this is the case we can just look through your table cells for the heading Date and then get the text from the following cell (that cell's index + 1).
It should be pointed out that this is less than ideal. This solution, like every other one we can offer given the circumstances, can very easily be defeated if mark-up changes in the future. Just something to keep in mind, though I do understand that sometimes you have no choice.
$("td").each(function(ind, ele) {
if(ele.textContent === "Date"){
console.log("date is", $("td").eq(ind+1).text() );
}});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>

Code: http://tpcg.io/Vy9IwJ
<script>
$(document).ready(function() {
$(".stripped td").get().forEach(function(entry, index, array) {
if ($(entry).text()=='Country') {
$('#result').html( $('#result').html()+'Country: '+$(entry).next().text() );
}
});
});
</script>
<div id="result">
</div>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">City</td>
<td class="red">xyz</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Country</td>
<td class="red">abc</td>
</tr>
<tr class="red">
<td style="font-weight:bold;">Date</td>
<td class="red">05.10.2017</td>
</tr>
</table>
<table class="stripped">
<tr class="red">
<td style="font-weight:bold;">Category</td>
<td class="red">This is category</td>
</tr>
</table>

Jquery copying the attribute of the the thead tr td to the tbody tr td

Can we copy the data from thead to tbody? I only wanted to get the data-date
<table>
<thead>
<tr>
<td data-date="2017-10-08"></td>
<td data-date="2017-10-09"></td>
<td data-date="2017-10-10"></td>
<td data-date="2017-10-11"></td>
<td data-date="2017-10-12"></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
Can i copy the attribute of the thead tr td? to the tbody tr td? so it will also become
<table>
<thead>
<tr>
<td data-date="2017-10-08"></td>
<td data-date="2017-10-09"></td>
<td data-date="2017-10-10"></td>
<td data-date="2017-10-11"></td>
<td data-date="2017-10-12"></td>
</tr>
</thead>
<tbody>
<tr>
<td data-date="2017-10-08"></td>
<td data-date="2017-10-09"></td>
<td data-date="2017-10-10"></td>
<td data-date="2017-10-11"></td>
<td data-date="2017-10-12"></td>
</tr>
</tbody>
Note that I cant manully put the attribute coz this is coming from a plugin

You can set header td value in an array then set it using that arraywith jQuery each() function. check updated snippet below..
var xyz = [];
$('table thead td').each(function(){
xyz.push($(this).data('date'));
})
$('table tbody td').each(function(i,el){
$(this).data('date', xyz[i]).html(xyz[i]);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border='1' celpadding="2">
<thead>
<tr>
<td data-date="2017-10-08"></td>
<td data-date="2017-10-09"></td>
<td data-date="2017-10-10"></td>
<td data-date="2017-10-11"></td>
<td data-date="2017-10-12"></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Try this solution. Get both tds and iterate over one, use that index and copy the data-date into the tbody tds.
const theadTds = $('thead tr td');
const tbodyTds = $('tbody tr td');
theadTds.each((index, td) => {
const tbodyTd = tbodyTds.eq(index); // Get current tbody td
tbodyTd.data('date', $(td).data('date')); // Set the `data-date` to the `thead td` `data-date`
console.log(tbodyTd.data('date'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td data-date="2017-10-08"></td>
<td data-date="2017-10-09"></td>
<td data-date="2017-10-10"></td>
<td data-date="2017-10-11"></td>
<td data-date="2017-10-12"></td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>

No need for any interim variables etc. Just iterate over the columns, this does ALL rows in body, if you just want first one you can do that also.
$('thead').find('tr').find('td').each(function(index){
$('tbody').find('tr').find('td').eq(index).data('date',$(this).data('date')):
});
Only first row in body
$('thead').find('tr').find('td').each(function(index){
$('tbody').find('tr').eq(0).find('td').eq(index).data('date',$(this).data('date')):
});
Alternate syntax if that is more clear to you
$('thead').find('tr').find('td').each(function(index,element){
$('tbody').find('tr').eq(0).find('td').eq(index).data('date',$(element).data('date')):
});

Add <tr> element in the table

I want when i click on the +add more button it should add the element same as in line no.1 also the S.No should incremented...and each row have remove option.
code in JSFIDDLE
+add more
<table class="table">
<thead>
<tr>
<th>S.No.</th>
<th>Name</th>
<th>Dose</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td style="width:80%">
<input id="1a" type="text" class="form-control">
</td>
<td style="width:80%">
<input type="number" class="form-control">
</td>
<tr>
</tbody>
</table>

Jquery clone() is for cloning DOM element and then you can append it. Consider code something like this:
$(function(){
$("#c").click(function(e){
e.preventDefault();
$("table.table tbody tr:first").clone().appendTo("table.table tbody");
});
})
DEMO
For increment of serial number:
$(function(){
var counter = 1;
$("#c").click(function(e){
e.preventDefault();
var tr = $("table.table tbody tr:first").clone().appendTo("table.table tbody");
tr.find("td:eq(0)").text(++counter);
});
})
See it in action

You can use .clone() to copy your first tr:
$(".text-right").on("click", function() {
var tr = $("table tr:eq(1)").clone(true);
$(tr).find("td:first").text($("table tr").length - 1);
$("table").append(tr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+add more
<table class="table">
<thead>
<tr>
<th>S.No.</th>
<th>Name</th>
<th>Dose</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td style="width:80%">
<input type="text" class="form-control">
</td>
<td style="width:80%">
<input type="number" class="form-control">
</td>
<tr>
</tbody>
</table>
I remove id from input cause id must be unique. Also modify a bit the code to increase the numeric value of the td correct.

try:
html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+add more
<table class="table">
<thead>
<tr>
<th>S.No.</th>
<th>Name</th>
<th>Dose</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td style="width:80%">
<input type="text" class="form-control">
</td>
<td style="width:80%">
<input type="number" class="form-control"/></br><a class="rm" href="#">remove</a>
</td>
</tr>
</tbody>
</table>
js:
function updateNumber() {
x = 0
$('table.table tbody tr').each(function(i,v){
$(this).find('td:eq(0)').text(x+1)
x++;
});
}
$("#c").on('click',function(e){
e.preventDefault();
var tr = $("table.table tbody tr:first").clone().appendTo("table.table tbody");
updateNumber();
console.log($('table.table tbody tr'));
});
$('body').on("click",".rm", function(e) {
e.preventDefault();
$(this).parents('tr').remove();
updateNumber();
});
jsfiddle:https://jsfiddle.net/pjeruccb/3/

Have a look at this:
$(".text-right").on("click", function() {
var prevNo = parseInt($(".table tr:last td:first-child").text());
var tr = $("table tr:eq(1)").clone(true);
$("table").append(tr);
$('.table tr:last-child td:first-child').html(prevNo + 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
+add more
<table class="table">
<thead>
<tr>
<th>S.No.</th>
<th>Name</th>
<th>Dose</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td style="width:80%">
<input type="text" class="form-control">
</td>
<td style="width:80%">
<input type="number" class="form-control">
</td>
</tr>
</tbody>
</table>

How to Hide an image stored in second TD based on the values of table stored in first TD with JQuery?

I have a 2 columns TABLE with first TD containing another TABLE with 3 rows of contents and second TD with an image as below:-
<table id="myTable" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="padding-top: 10px;">
<table>
<tbody>
<tr>
<td align="left">
Wellness and Care
</td>
</tr>
<tr>
<td align="left">
630 Woodbury Drive
</td>
</tr>
<tr>
<td align="left">
641.613.1450
</td>
</tr>
<tr>
<td align="left">
No Webaddress
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" id="imgPhone">
</td>
</tr>
<tr>
<td style="padding-top: 10px;">
<table>
<tbody>
<tr>
<td align="left">
Hospital
</td>
</tr>
<tr>
<td align="left">
N/A
</td>
</tr>
<tr>
<td align="left">
641.613.1451
</td>
</tr>
<tr>
<td align="left">
No Webaddress
</td>
</tr>
</tbody>
</table>
</td>
<td align="right">
<img src="images/phone.png" class="imgHeader" id="imgPhone">
</td>
</tr>
</tbody>
</table>
I am trying to disable the image on the second column of the row, if the Value of one of the TD is "N/A". I am stuck at getting the parent TR and going to second TD to do something.
My try is as follows:
$('#myTable tr').each(function () {
if ($(this).find("td").text().trim() == "N/A") {
var cellIndex = $(this).index();
var nextTD = $(this).children('td').eq(1).index();
// I am basically stuck here in getting next TD
}
});
Any help is appreciated!!

DEMO
$('#myTable td:first-child td:contains("N/A")').parents('td').next().find('img').hide();

Try
$( '#myTable td:first-child td:contains("N/A")' ).closest('tr').closest('td').next().find('img').hide()
Demo: Fiddle

What I would do in your case is add a class for your 4 tr tags with text. Then you can just parse through each of those 4 by their class and if one of them is equal to 'N/A' you can grab the image by its ID and hide it.
HTML:
<td class="test" align="left">
Wellness and Care
</td>
JQuery:
$('.test').each(function () {
if($(this).text().trim() == 'N/A') {
$("#imgPhone").toggle();
}
});
JSFiddle: http://jsfiddle.net/ax6Mv/

This should be enough to get you started:
$( '#myTable td:first td' ).each(
function() {
if ( $( this ).text().trim() == 'N/A' ) {
$( '#myTable td' ).eq( 1 ).hide();
}
}
);