Develop Reference

replacing the content inside the tbody except one tr

I have a code in javascript where i need to replace the content inside the tbody except for the tr which has a class of template. I tried
$('#table').find('tbody').not(".template").html('<tr class="text-center"><td colspan="5">No Todo data</td></tr>');
but still it replace the whole tbody and not keeping the tr with a class of template.
this is the html
<table class="table" id="todo_list">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Todo</th>
<th scope="col" style="width:20%">Action</th>
</tr>
</thead>
<tbody>
<tr class="template" hidden>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell text-center">
<button class="btn btn-warning btnUpdate" id="btnUpdate">Update</button>
<button class="btn btn-danger btnDelete" id="btnDel">Delete</button>
</td>
</tr>
</tbody>
</table>

Your code is very close; the main changes needed are:
to select the tr elements of your tbody by adding .find("tr") (see below)
use .replaceWith() rather than .html()
The revised approach can be understood as:
$('#table') /* <- select element with id table and then */
.find('tbody') /* <- select the tbody of that table and then */
.find('tr') /* <- select the tr elements of that tbody and then */
.not('.template') /* <- filter tr elements that are not .template and then */
.replaceWith($('<tr class="text-center"><td colspan="5">No Todo data</td></tr>')); /* <- replace those resulting tr elements with new tr */
Here's an example of the updated code in action:
$('#table')
.find('tbody')
.find('tr')
.not('.template')
.replaceWith($('<tr class="text-center"><td colspan="5">No Todo data</td></tr>'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="table">
<tbody>
<tr>
<td>Replace me</td>
</tr>
<tr class="template" hidden>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
<td class="cell text-center">
<button class="btn btn-warning btnUpdate" id="btnUpdate">Update</button>
<button class="btn btn-danger btnDelete" id="btnDel">Delete</button>
</td>
</tr>
<tr>
<td>Replace me</td>
</tr>
</tbody>
</table>
As a final note, a more consise version that achieves the same result as shown above can be written as:
$('tbody tr:not(.template)', '#table')
.replaceWith($('<tr class="text-center"><td colspan="5">No Todo data</td></tr>'));
Update
To replace all rows that do not have a class of .template with a single row that reads "No todo data" you can do the following:
var nonTemplateRows = $('tbody :not(.template)', '#table');
if(nonTemplateRows.length > 0) {
nonTemplateRows
.empty()
.append($('<tr class="text-center"><td colspan="5">No Todo data</td></tr>'));
}

you could try this way ->
fetch html code of row with template class then append to it
$('#table').find('tbody').html(
'<tr>'+
$('#table').find('tbody').find(".template").html()+
'</tr>+
'<tr class="text-center"><td colspan="5">No Todo data</td></tr>');

jQuery search toggled table rows

I've a table with rows that I can toggle. Now I wanna search in the table. My search function work's but does not display the hidden rows. How can I do this? Here my search function.
$(document).ready(function(){
$("#search").keyup(function(){
var search = $(this).val();
$("table tbody tr").hide();
$(".header-1").show();
$(".header-2").show();
$("table tbody tr td:contains("+search+")").each(function(){
$(this).closest("tr").show();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="skills" id="skills" width="100%" cellspacing="0">
<tr class="header-1">
<th>Skill</th>
<th colspan="2">Theoretische Kenntnisse</th>
<th>Praktische Kenntnisse</th>
<th class="skills_pfl">Zuletzt gepfelgt</th>
</tr>
<tr class="header-2">
<th></th>
<th class="skills_ausb">Ausgebildet</th>
<th class="skills_ausb_jhr">Ausbildungsjahr</th>
<th></th>
<th></th>
</tr>
<tr id="74" class="skills_kat">
<td style="text-align: left;" class="show"
onclick="$('#body-74').toggle(300); $('#fa-74').toggleClass('fa-caret-right').toggleClass('fa-caret-down');">
<i class="fa fa-caret-right" id="fa-74"></i> Anwendungsgebiete
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tbody id="body-74" class="table-body"></tbody>
<tr id="116" class="skills_kat">
<td style="text-align: left;" class="show"
onclick="$('#body-116').toggle(300); $('#fa-116').toggleClass('fa-caret-right').toggleClass('fa-caret-down');">
<i class="fa fa-caret-right" id="fa-116"></i> Application Server
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Some peoples don't understandt me. The search logic works fine, but I've rows that I can toggle with a click. And these rows won't be display if i search the table. Here a screenshot.

Why don't you turn your logic around and hide only the ones you don't want to see? Like so:
$(document).ready(function() {
var consolidatedArray = $("table tbody tr td").slice();
$("#search").keyup(function() {
var search = $(this).val();
$("table tbody tr").show()
$(".header-1").show();
$(".header-2").show();
$("table tbody tr td:not(:contains(" + search + "))").each(function() {
$(this).closest("tr").hide();
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>abc</td>
</tr>
<tr>
<td>efg</td>
</tr>
<tr>
<td>xsd</td>
</tr>
<tr>
<td>sdf</td>
</tr>
<tr>
<td>ffs</td>
</tr>
<tr>
<td>abc</td>
</tr>
</tbody>
</table>
<input id="search" type="text"/>

How to Load another page onclick of appended div

I have a table with some rows. in this table i have Add button to append rows when clicked. my question is how can i load ajax seconpage in class = loadi in rows when Add clicked?
i wrote some codes but the codes is not working to load second page in div with class loadi. here is my Snippet:
$(document).ready(function() {
$(".add").click(function() {
$('#mytable tr:last').after('<tr><td class="tr1" colspan="3" style="height:30px;"><div class="loadi"></div></td></tr>');
});
$(".loadi").load("secondpage.html");
})
.add {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="mytable" border="1">
<tr>
<td>1</td>
<td>Title</td>
<td>price</td>
</tr>
<tr>
<td>1</td>
<td>Title</td>
<td>price</td>
</tr>
</table>
<span class="add">Add +</span>

You need to call load() within the click handler on the content that you just appended. Your current logic doesn't work as you call load() before the element exists, therefore nothing happens. Try this:
$(".add").click(function() {
var $tr = $('<tr><td class="tr1" colspan="3" style="height:30px;"><div class="loadi"></div></td></tr>').insertAfter('#mytable tr:last');
$tr.find(".loadi").load("secondpage.html");
});
$(".add").click(function() {
var $tr = $('<tr><td class="tr1" colspan="3" style="height:30px;"><div class="loadi"></div></td></tr>').insertAfter('#mytable tr:last');
//$tr.find(".loadi").load("secondpage.html"); // AJAX...
$tr.find(".loadi").text("load AJAX content here...");
});
.add {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="mytable" border="1">
<tr>
<td>1</td>
<td>Title</td>
<td>price</td>
</tr>
<tr>
<td>1</td>
<td>Title</td>
<td>price</td>
</tr>
</table>
<span class="add">Add +</span>

You have to put the .load() inside the click handler:
$(".add").click(function() {
$('#mytable tr:last').after('<tr><td class="tr1" colspan="3" style="height:30px;"><div class="loadi"></div></td></tr>');
$(".loadi").load("secondpage.html");
});
The issue was you called the .load() before click at document ready. If there will be more added rows. Then you might use .last() to get the last .loadi div:
$(".add").click(function() {
$('#mytable tr:last').after('<tr><td class="tr1" colspan="3" style="height:30px;"><div class="loadi"></div></td></tr>');
$(".loadi").last().load("secondpage.html");
});

$(document).ready(function() {
$(".add").click(function() {
$('#mytable tr:last').after('<tr><td class="tr1" colspan="3" style="height:30px;"><div class="loadi"></div></td></tr>');
// window.open("secondpage.html", '_blank');
$(".loadi").load("secondpage.html");
});
})
.add {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="mytable" border="1">
<tr>
<td>1</td>
<td>Title</td>
<td>price</td>
</tr>
<tr>
<td>1</td>
<td>Title</td>
<td>price</td>
</tr>
</table>
<span class="add">Add +</span>

Adding a class to <tr> if <a> element has text

I'm trying to a add a class to every element that contains an <a> with a text so I could hide the <tr>'s that has no text! here is my HTML code and JavaScript:
$("tr a").each(function () {
var a= $(e);
if ($e.text().length > 0) {
tr.addClass("buttoneffect");
}
});
table tr {
height: 36px;
}
table tr:hover {
background-color: #BEDB7F;
}
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>Test 1</td>
</tr>
<tr>
<td>Test 2</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>Test 4</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>Test 6</td>
</tr>
</tbody>
</table>

see this fiddle
first you are referencing e , which you didn't pass inside the event callback, and there is no tr directly accessible you have to find out the closest tr to that of a
$("tr a").each(function () {
var a= $(this);
if (a.text().length > 0) {
a.closest('tr').addClass("buttoneffect");
}
});
Also if you want the trs to be hidden, you can add css for that: fiddle
tr:not(.buttoneffect)
{
display:none;
}
$("tr a").each(function() {
var a = $(this);
if (a.text().length > 0) {
a.closest('tr').addClass("buttoneffect");
}
});
table tr {
height: 36px;
}
table tr:hover {
background-color: #BEDB7F;
}
.buttoneffect {
background: red;
}
tr:not(.buttoneffect) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td>Test 1
</td>
</tr>
<tr>
<td>Test 2
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>Test 4
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>Test 6
</td>
</tr>
</tbody>
</table>

You can use .filter() find filter those elements and then call .addClass() on the filtered set to add the class
$("tr").filter(function () {
return $(this).find('a').text().trim().length > 0
}).addClass("buttoneffect");
Demo: Fiddle

use jquery parent().
$("tr a").each(function () {
var a= $(this);
if (a.text().length > 0) {
a.parnt('tr').addClass("buttoneffect");
}
});

Try this Demo Here
$("tr a").each(function () {
var a= $(this);
if (a.text().length > 0) {
a.closest('tr').addClass("buttoneffect");
}
});

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