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.
Related
I have an outer DIV containing the content I want to block. However only the inner TD has the attributes as the qualifier.
I've already got the code (From an SO user) and use TamperMonkey to implement it and it works like a charm. However it removes too little and keeps the parent DIV. I know too little of JavaScript to affect the outter DIV.
<DIV>
<Table></TABLE>
<Table>
<td attribute="desiredTarget"></td>
</TABLE>
<Table></TABLE>
</DIV>
Expected: DIV should not display based on TD content
Results: DIV still displays
Use jQuery it will better than PURE JS
$('td[attribute="X"]')
.parent() //TO TR
.parent() //TO TBODY
.parent() //TO TABLE
.parent() //TO DIV
.css("background-color", "red"); ///Your command
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
1
<table border="1">
<tr>
<td>Unnesscessary</td>
</tr>
</table>
2
<table border="1">
<tr>
<td attribute="X">xxx</td>
<td>Unnesscessary</td>
</tr>
<tr>
<td>Unnesscessary</td>
</tr>
</table>
3
<table border="1">
<tr>
<td>Unnesscessary</td>
</tr>
<tr>
<td>Unnesscessary</td>
</tr>
</table>
</div>
HTML
<table>
<tr id="1">
<td id="a">aa</td>
<td>bb</td>
</tr>
</table>
JavaScript
document.getElementById("1").children[1].innerHTML="newB" // it works as expected.
document.getElementById("a").nextSibling.innerHTML="newB" // it does not work.
How can I change td id="a" sibling value using 2nd approach?
Use nextElementSibling
document.getElementById("a").nextElementSibling.innerHTML = "newB";
nextSibling will select the empty textNode as you can see in the following demo
console.log(document.getElementById("a").nextSibling);
<table>
<tr id="1">
<td id="a">aa</td>
<td>bb</td>
</tr>
</table>
You can see that nextSibling will work as expected when you have no space between the elements. So, it'll not select the empty textNode.
document.getElementById("a").nextSibling.innerHTML = "newB";
<table>
<tr id="1">
<td id="a">aa</td><td>bb</td> <!-- No space, it works! -->
</tr>
</table>
It is because, the next sibling of the td could be a text node, you need the next element sibling.
You can use the nextElementSibling property
document.getElementById("a").nextElementSibling.innerHTML = "newB";
<table>
<tr id="1">
<td id="a">aa</td>
<td>bb</td>
</tr>
</table>
Note: supported in IE 9+
I have a table with 4 columns . 4th column is a button (not shown in below code). When I click on the button in a row, I want to get row elements.
I have done it using closest selector. Is there any way to find table row element "Without using closest". This is the requirement for some reason.
Please assume there is a button at end of each row
<table id="food">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Type</th>
</tr>
</thead>
<tbody>
<tr class='details'>
<td>1</td>
<td>Apple</td>
<td>Fruit</td>
</tr>
<tr class='details'>
<td>2</td>
<td>Mango</td>
<td>Fruit</td>
</tr>
<tr class='details'>
<td>3</td>
<td>Grape</td>
<td>Fruit</td>
</tr>
</tbody>
</table>
Here is the existing code, I need to replace closest. It will be awesome if I can use class names like $(this).somethin('.details');
$('#button1').click(function(){
var row = $(this).closest('tr');
//Do some stuff
})
Thanks
Use parents() and pass a class selector like
$('#button1').click(function(){
var row = $(this).parents('.details');
//Do some stuff
})
Note, you could also use closest in this case and pass the class selector
var row = $(this).closest('.details');
<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
</tr>
<tr onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="DoNav('go.html');">
<td>1</td>
<td>John/td>
<td>Dump</td>
</tr>
</table>
Javascript:
function ChangeColor(tableRow, highLight)
{if (highLight)
{tableRow.style.backgroundColor = '#F5FFDB';}
else
{tableRow.style.backgroundColor = '';}}
function DoNav(theUrl)
{document.location.href = theUrl;}
I use the following structure to draw the table. When I hover on a row it changes the background and anywhere I click on the row it will jump to the url. What I'm trying to do is have some id identifier (that maybe goes into <td>) which basically tells certain columns in a row to behave differently. Namely this is what I'm looking for:
<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
</tr>
<tr>
<td id="hover_go_style_1">1</td>
<td id="hover_go_style_1">John</td>
<td id="hover_go_style_2">Dump</td>
</tr>
</table>
Any ideas?
EDIT:
I forgot to mention... the id="hover_go_style_1" would take me to one url and id="hover_go_style_2" would take me to another url. That's the "difference". As it is now with onClick the whole row takes me to one url, but in essence im trying to isolate cells. Not sure how to explain this better.
You should be using CSS for your hover color, it's much simpler there. Your click event can be much nicer hooked up and handled completely in your JavaScript also. I've added a data-url (HTML5-compatible) attribute to your row to define the URL.
jsFiddle
HTML
<table>
<tr>
<th>#</th>
<th>Name</th>
<th>Surname</th>
</tr>
<tr data-url="go.html">
<td>1</td>
<td>John</td>
<td>Dump</td>
</tr>
</table>
JS
$('tr[data-url]').click(function () {
window.location.href = $(this).attr('data-url');
});
CSS
tr:hover td {
background-color:#F5FFDB;
}
/* Style the third column differently */
tr:hover td:nth-child(3) {
background-color:#F00;
}
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