I'm pointing at the first div inside my table's td as you can see in the jQuery code below.
$('table tr td div').css("position", "relative");
But I've got some problems with that so I've tried this:
$('table tr td').parents('div:first').css({position:'relative'});
But this one doesn't work fine either. What is wrong with my code?
My HTML structure is:
<table>
<tr>
<td><!-- all id for the div and image inside the td are dynamic -->
<div><!-- Need to access this div -->
<!-- content --->
</div>
</td>
</tr>
</table>
.parents() find all parent of your selection. what you want is a child.
$('table tr td div:first').css("position", "relative");
This will do the trick for you :)
You also might want to select only exact descendants, in that case you can use:
$('table tr td > div:first').css("position", "relative");
You could use below 2 methods if you want to find the occurrence of the first DIV from TD with the class'vx1'
$( "table tr td.vx1 > div:first" ).css( "width", "50" );
You could use below 2 methods if you want to find the occurrence of the first DIV from TH with the class'vx1'
$( "table tr th.vx1 > div:first" ).css( "width", "50" );
Related
JsFiddle
I am trying to delete Default from each of the node. I tried following code
$( document ).ready(function() {
$( "table tbody tr td:nth-of-type(1) select option").first().remove();
});
It deleted the element from from the first node. Can someone help me to delete first element from each node.
$("table tbody tr td:nth-of-type(1) select option:first-child").remove();
Demo: http://jsfiddle.net/rqtaz/6/
.first() returns the first element in the set.
You want to use the :first-child selector, which will filter the simple selector you apply it to to only match the first child of the parent:
$("table tbody tr td:first-child select option:first-child")
This will only match <option> elements that are the first child of their respective parents.
You can also use it on the td.
I have a very simple table
<table>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</table>
when i append another row to the above table with text 5 in td jquery each() doesn't loop through newly added row it returns only predefined elements not the elements dynamically added
$("table > tbody").append("<td>5</td>");
$("table tr td").each(function(){
alert($(this).text());
});
Please see JS FIDDLE LINK HERE
In tbody you cannot append td directly wrap them in tr.
Live Demo
$("table > tbody").append("<tr><td>5</td></tr>");
$("table tr td").each(function(){
alert($(this).text());
});
Your reasoning is incorrect. The reason it doesn't find the element is because your selector doesn't match the nesting of elements that you're appending.
Wrap the td elements in a tr element.
You need to do this:
$("table > tbody").append("<tr><td>5</td></tr>");
$("table tr td").each(function(){
alert($(this).text());
});
The reason is simple you, your original code will produce the new row as <tbody><td>5</td></tbody> without the tr tag that you were looking for in the each function.
I'm having problems with html DOM.
How do I get the value from this path:
html body div table tbody tr td table tbody tr td table tbody tr td table tbody tr td form table tbody tr td
I can only find stuff like getElementbyID/tag/name/class etc.
How do I get the absolute DOM 'path' of the td element (let's say the 3rd cell of the second row in that table)?
I've been looking everywhere but cannot find a simple answer without ID/Class etc involved.
You could use querySelector(), but it doesn't have great support...
var elem = document.querySelector('html body div table tbody tr td table tbody tr td table tbody tr td table tbody tr td form table tbody tr td');
Otherwise just use a library that allows you to use CSS selectors, such as jQuery.
var $elem = $('html body div table tbody tr td table tbody tr td table tbody tr td table tbody tr td form table tbody tr td');
By the way, selecting like this is horrible for performance. Absolutely terrible. Have a read up on CSS selectors to learn why.
First, consider whether you do really need full paths. Referring to IDs or classes is more robust as they have less moving parts.
If full paths are what you need, you may wish to use XPath, as it's specifically designed for finding elements by path.
Here's a simple cross browser XPath library - there are many others.
Looks like you may want something like this:
For the following sample HTML,
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="findit.js"></script>
</head>
<body>
<div id="header">
<h1>Welcome to my ASP.net site!</h1>
</div>
<div id="h440292">
<table>
<!-- tbody omitted, but some (all?) browsers add it -->
<tr>
<td>junk</td>
<td>junk</td>
<td>junk</td>
</tr>
<tr>
<td>junk</td>
<td>junk</td>
<td>pick me!</td>
</tr>
</table>
</div>
</body>
</html>
this jQuery code will find the cell that says "pick me!"
$(function () {
var $resultCell = $("body")
.children("div").eq(1)
.children("table")
// Note I have to add this even though
// I omitted the tbody in the HTML markup
.children("tbody")
.children("tr").eq(1)
.children("td").eq(2);
alert($resultCell.text());
});
If performance becomes a problem, you may need to resort to doing something similar using the native DOM methods.
I am playing with this idea. I want to be able to find any node on a page (using a headless browser). Trying to build an absolute node path I created a recursive function, works but I am finding it is not completely unique which is annoying. On here for example, each post is templated so selecting text in the third response will reveal the same node path up the HTML tag as the first post
const buildPath = (node) => {
console.log(node);
if(node.tagName !== "HTML") {
path.unshift(node.tagName.toLowerCase())
buildPath(node.parentNode)
}
};
const path = [];
builtPath(<start node>);
document.querySelector(path.join(" "))
but this is where I am stuck now. Some things don't have any specific classes or names or ids to add to that. I may need to capture the innertext or innerhtml and try to match that. Kinda annoying. I suppose you could load like D3 and inject an incremental ID as data but then the site can't change at all, which may be true for this method too but I would think less so.
i have a href link under my table and i want to be able to manipulate table rows by clicking on that link but i cant get them !
here is my html
<div>
<div> <a href="#remove" class="removelink" > remove </a> </div>
<table>
<tr> <td></td> </tr>
</table>
</div>
i want to do something like:
$('.removelink').click(function(){
$(this).parent().siblings('table tr:last').remove();
})
i can get to the table by
$(this).parent().siblings('table')
but i cant get rows by something like
$(this).parent().siblings('table tr')
You can use find to get to the tr from the table:
$('.removelink').click(function(){
$(this).parent().siblings('table').find('tr:last').remove();
});
Here's a working example. If your HTML structure is always exactly as you've shown, you could use next() instead of siblings('table') for slightly shorter code.
The problem with your current code is that siblings('table tr') will look for a sibling of the div which is a tr, and there are none!
.siblings(selector) will return all siblings of a certain element which match the selector.
.siblings('table tr') will only return something if the context element has tr elements as siblings but the div does not.
Just use .find:
$(this).parent().siblings('table').find('tr').last()
var $context = $(this).parent().siblings('table');
$("tr:last", $context);
I have a simple bit of jQuery which displays the row below the current one if selected.
What I want if for all the <td> elements but one to fire this method.
Works on whole <tr> row
$(document).ready(function(){
$("#report > tbody > tr.odd").click(function(){
$(this).next("#report tr").fadeToggle(600);
});
});
want to do something like (doesn't work)
$(document).ready(function(){
$("#report > tbody > tr.odd > td.selected").click(function(){
$(this).next("#report tr").fadeToggle(600);
});
});
You need something like this:
$(document).ready(function(){
$("#report tr:not(.odd)").hide();
$("#report tr:first-child").show();
$("#report > tbody > tr.odd > td.selected").click(function(){
$(this).closest("tr").next("tr").fadeToggle(600);
});
});
Since you're clicking a td, need to go up to the row before trying to get the next row. Also this selector should work the same in most cases: #report td.selected. Since you can't escape being inside the #report with a sibling, #report tr can also be just tr in your next().
In your non-working code, $(this) is a <td> element.
Therefore, $(this).next("#report tr") doesn't match anything. (Because the <td> element has no <tr> elements as siblings)
You need to change it to $(this).closest('tr').next("#report tr") to find the "uncle" element. You could also call .parent() instead of .closest('tr'), but calling .closest will keep working even if you bind the click handler to a child of the <td>.