jquery remove table row - javascript

I'm having a problem removing a table row, I can highlight the row red but when I try to remove it the slideup function messes up. I have wrapped them in a div but I don't no how to access the children of the tr and then the children of that?
$('#test tr:not(:first)').click(function()
{
$(this).css("background-color","red");
$(this).children("td div").slideUp(function()
{
$(this).parent().remove();
});
});
The problem is this line:
$(this).children("td div").slideUp(function()
I also tried
$(this).children("td").children("div").slideUp(function()
The slide up only removes the first column.
<table border="1" width="600" cellspacing="0" cellpadding="0" id="test">
<tr>
<td><b>First Name</b></td>
<td><b>Last Name</b></td>
<td><b>Address</b></td>
<td><b>Town</b></td>
</tr>
<tr>
<td><div>First Name</td>
<td>Last Name</td>
<td>Address</td>
<td>Town</div></td>
</tr>
</table>
Do I need to wrap the content of each <td> with a div tag?
Thanks

Calling children("td div") will find all direct children that match the selector. (all children which are <div>s that happen to be inside of <td>s)
Since all of the direct children are <td>s, it won't match anything.
Calling children("td").children("div") will find all <div>s inside of all <td>s.
It will thus find the only <div> you have there.
EDIT: You can use jQuery to create wrapper elements; see my blog post:
$('#test tr:not(:first)').click(function() {
$(this).css("background-color","red");
$(this).children().wrapInner('<div>').children().slideUp(function() {
$(this).closest('tr').remove();
});
});
Demo

Related

Delete table rows if table data does not contain a specific class

I got a question regarding removing table rows within a table. I got the following HTML:
<table>
<tr>
<td class="html5badge">autofocus</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
<tr>
<td>disabled</td>
<td>disabled</td>
<td>Specifies that a drop-down list should be disabled</td>
</tr>
<tr>
<td class="html5badge">test</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
</table>
I need a mechanism that looks whether the first <td> does not contain the html5badge class and delete the parent: <tr>.
To do this I created the following jQuery code:
$(document).ready(function() {
$(".onlyhtml5").click(function(event) {
event.preventDefault();
var classname = $('table tr td').not('.html5badge');
console.log(classname)
for (i = 0; i < classname.length; i++) {
$(classname[i].parentNode).remove();
}
});
});
This works but it does not exactly what I want. As you can see in my JSFIDDLE it will delete all the table rows. But what I want is the following desired output:
<table>
<tr>
<td class="html5badge">autofocus</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
<tr>
<td class="html5badge">test</td>
<td>autofocus</td>
<td>Specifies that the drop-down list should automatically get focus when the page loads</td>
</tr>
</table>
The desired output is that the <tr> that contained the text: disabled is been removed! Based on the fact that the <td> within this <tr> does not contained the class: html5badge.
How can I achieve this?
You can use filter() to retrieve the tr elements which do not contain td.html5badge and remove them:
$(".onlyhtml5").click(function(e) {
e.preventDefault();
$('tr').filter(function() {
return $(this).find('td.html5badge').length == 0;
}).remove();
});
Updated fiddle
simply make it
$(document).ready(function() {
$(".onlyhtml5").click(function(event) {
event.preventDefault();
$('table tr td').not('.html5badge').each( funtion(){
$( this ).parent().remove();
} );
});
});

Select element if contains text

I can't get this one to work and I can't find any similar question that does the same what I want.
I have a table with rows like this:
<div class="gui-table">
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><p class="customfields">Size</p></td>
<td></td>
</tr>
//etc...
I want to check if all the second cells have the text "size" in it! If so then hide the third td.
So what I thought what would work is this:
$('.gui-table tr').each(function(){
if ($('td:nth-child(2) .customfields:contains("Size")').length > 0) {
$(this).css('visibillity', 'hidden');
}
});
This doesn't work! Does anybody see what is wrong with this?
Just do:
$('.gui-table .customfields:contains("Size")').css('visibility', 'hidden');
Fiddle: http://jsfiddle.net/cfmrngcc/2/
Assuming I understand your question correctly the following should do it:
$('.gui-table p.customfields:contains("Size")').parent().next().hide();
td { border: 1px solid black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gui-table">
<table>
<tr>
<td></td>
<td></td>
<td>Shown</td>
</tr>
<tr>
<td></td>
<td><p class="customfields">Size</p></td>
<td>Hidden</td>
</tr>
</table>
</div>
This will hide the next table cell after any table cell containing a p tag with the text Size.
It works by finding the P tags containing size inside the gui-table - $('.gui-table p.customfields:contains("Size")')
Then using .parent() to select it's parent table cell.
And finally .next() and .hide() to select the next table cell and hide it.
I banged around on this and came up with this JSFiddle that should get you going again. The essential function is much like you started with but modified like this:
function doItNow(e)
{
$('.gui-table tr').each(function ()
{
$('td:nth-child(2) .customfields:contains("Size")').each(function ()
{
$(this).parents('tr').children('td:nth-child(3)').css('visibility', 'hidden');
});
});
}
Note that the inner each() is passing the paragraph element and not the cell element. So I traversed up the parents() chain until I find the row and hide the 3rd child. You might be able to code this without the inner each but I am too lazy to be that complicated!
If you only want to hide the third column, when there is the word 'size' in the second one you can do this in that way:
$('.gui-table td:nth-child(2):contains("Size")').next().css('visibility', 'hidden');
Here is a jsfiddle:
http://jsfiddle.net/0qczvak5/
The explanation:
Select all elements with the class name .gui-table, select all second tds with td:nth-child(2), filter them with :contains("Size"). Now you have all second tds with the word "Size" and with .next() you get the following cell (the third one) and you hide it with .css('visibility', 'hidden').
$(".gui-table tr td:nth-child(2)").each(
function (index,tag){
if ($(tag).find("p").text() == "Size")
$(tag).css('visibility', 'hidden');
}
)
This is will work .

Jquery select tbody but not from nested tables

I am trying to append data to a table, that gets selected using jquery. The problem is, this table may have nested tables within it. What happens is that when I append the data, not just the parent table's tbody gets appended but so too does all the children tables tbody. Here is my code:
var template = window.app.getTemplate('myTemplate');
var image = {id: imageId, name: imageName, imageList: imageTypes, extension: ext, thumbNail: thumbNailPath};
$("#MyTable tbody:first").append(template(image));
Where myTemplate is set up like this:
<tr>
<td>
<table>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</td>
<tr>
</tr>
<td></td>
</tr>
and MyTable is set up like this:
<table id="MyTable" data-attr="images">
<thead>
</thead>
<tbody>
</tbody>
</table>
Like I said, when the append happens, if there is more than one table within tbody, all tbody's get appended to. So, how do I select only the first?
thanks
JQuery uses the CSS selectors to reach the element.
$("#MyTable > tbody:first")
E > F Matches any F element that is a child of an element E.
See more at http://www.w3.org/TR/CSS2/selector.html#child-selectors
Maybe if you update your jquery selector
$("#MyTable > tbody:first")
Try:
$("#MyTable > tbody").append(template(image));

Check a table row cell for contents

I want to use jQuery to check if the 2nd cell in each table row of a table contains any text, if the 2nd cell doesn't contain any text then set the table row to display: none;
Whats the best way to go about this?
HTML:
<table id="results">
<tr>
<td>Results</td>
<td>1000</td>
</tr>
<tr>
<td>Description</td>
<td></td> <!-- This cell is empty so hide row -->
</tr>
<tr>
<td>Time/Date</td>
<td>14:03 22/01/12</td>
</tr>
</table>
Have a look at the :empty selector:
$('table tr').has('td:empty:nth-child(2)').hide()
$('table tr').each(function() {
if(!$(this).find('td').eq(1).html().length) {
$(this).hide();
}
});
This will loop through each tr, find the second element using $.eq(1) (arrays start from zero) and see if it contains anything using $.html().length. If it's empty, it hides the tr with $(this).hide().
a simple solution, make use of :empty selector
$("#results tr").find('td:eq(1):empty').parent().hide();
fiddle : http://jsfiddle.net/GHg7f/2/

Regarding jquery code snippet help

Regarding the below code snippet i understand the bit but i have few confusion like
$(this).children().contents().wrap('<div>').parent().slideUp(function() {
$(this).closest('tr').remove();
});
1) children().contents() what it does.
2) wrap('<div>') what is wrapping and why div is required.
3) which one is parent parent() tr parent is table
4) what is the functionality of closest() how closest('tr') refer current tr?
i just do not understand the above line like
full code
<table border="1" width="600" cellspacing="0" cellpadding="0" id="test">
<tr>
<td><b>First Name</b></td>
<td><b>Last Name</b></td>
<td><b>Address</b></td>
<td><b>Town</b></td>
</tr>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Address</td>
<td>Town</td>
</tr>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Address</td>
<td>Town</td>
</tr>
<tr>
<td>First Name</td>
<td>Last Name</td>
<td>Address</td>
<td>Town</td>
</tr>
$('#test tr:not(:first)').click(function() {
$(this).css("background-color","red");
$(this).children().contents().wrap('<div>').parent().slideUp(function() {
$(this).closest('tr').remove();
});
});
children().contents() will return the content of each <td> for the clicked <tr>. According to your example, all tds contain text and so an array of TextNode will be returned.
wrap('<div>') it will wrap each text with a tag. <div> is not "required", it's a what you are wrapping your text with.
parent() it refers to the <div> since <div> is the parent for the content after wrapping.
closest() simply return the nearest <tr> which is the <tr> being clicked.
contents => http://api.jquery.com/contents/
so it will get all textNodes in your example ( Frist Name, Last name and so on)
then you are wrapping those textNodes with a div so it actually becomse:
first name and so on, then you go up to that div with .parent() and then you slide up, after its done you remove the closest tr from the div you created.
a tip is to use firefox (with firebug) or chrome or any browser that has a console, it will help you debug codes like this in the future super fast and super easy.

Categories