I have a HTML snippet like below :
<tr><td></br></td></tr>
<tr title="title"><td></td><td>凝固検査専用容器</td></tr>
<tr id='map_6011' />
<tr id='map_6012' />
<tr id='map_6010' />
<tr id='map_6184' />
<tr id='map_6336' />
<tr><td></br></td></tr>
<tr title="title"><td></td><td>血糖専用容器(NaF入り)</td></tr>
<tr id='map_2055' />
<tr id='map_3471' />
<tr><td></br></td></tr>
<tr title="title"><td></td><td>ｱﾝﾓﾆｱ専用容器</td></tr>
<tr id='map_2142' />
First I want to select each TR tag with the title "title", and then first sibling of that particular TR tag.(ie, next TR with an ID like 'map_xxxx').
I have my javascript like this :
var lblTRs=$("tr[title=title]");
for(var i=0;i<lblTRs.length;i++){
var obj=lblTRs[i];
var firstTRSibling=obj.nextSibling;
alert(firstTRSibling); //this gives [object Text]
}
But it doesn't give the actual TR sibling.The alert() gives [object Text].
What am I doing wrong here ?
Try like this:
var firstTRSibling;
while((firstTRSibling=obj.nextSibling).nodeType !== 3){
// ^-----indicates TEXT_NODE
obj=obj.nextSibling;
}
alert(firstTRSibling);
You have extra white-space characters between DOM elements, and they will be treated as text nodes.
I think you can simply use next:
$("tr[title='title']").each(function() {
var element = $(this).next();
});
BTW, <tr> should have closing tags (i.e. </tr>) and also contain the specified number of <td></td> tags inside.
Your problem is that the white space between each pair of <tr> elements is represented as a text node in the DOM. However, there are seemingly little-known properties of of table-related elements that make dealing with this quite easy. Specifically in this case, the rows property of <table> elements and the rowIndex property of <tr> elements. Assuming you have a <tr> element stored in a variable called tr, all you need is:
tr.parentNode.rows[tr.rowIndex + 1];
This works in all major browsers back to IE 4 and is part of the DOM standard. It is also faster and more compatible than using jQuery or another library.
Ok,I should use
var firstTRSibling=obj.nextSibling.nextSibling;
But why?_
As you're already are using jQuery, i'd recommend to use jQuery built-in next function.
It could be somthing like var lblTRs=$("tr[title=title]").next("tr");
Related
A short question: i use a usually html + twig table which i fill with a lot values. The important part of this table looks like that:
{% if rec.pDsDuplicate =='0'%}
<td class="PFu1Exists">
{{rec.getPFu1Exists()}}
</td>
<td class ="PFu2Exists">
{{rec.getPFu2Exists()}}
</td>
<td class ="PFu3Exists">
{{rec.getPFu3Exists()}}
</td>
<td class= "PFu5Exists">
{{rec.getPFu5Exists()}}
</td>
<td class ="PSdqExists">
{{rec.getPSdqExists()}}
</td>
<td class="PFupExists">
{{rec.getPFupExists()}}
</td>
{% else %}
Now i use this function to select a row:
$("#search_results tr").click(function() {
$(this).addClass("selected").siblings().removeClass("selected");
});
after the selection, the row belongs to the class "selected".
Now my specify question: How i can get the value from the column with using the class/ID Attribut e.g PFu1Exists from the selected row.
of course, i can iterate about the row and compare, but im looking for a quick an short JQuery line.
during reading some posts here, i found the function closest and find, but how i have to write the statement that i can be shure!, that the query is just searching in the selected row.. ? and not will traverse up and down to the next row?
value= $(.selected).closest(.selected).find('.PFu1Exists');
thanks for your time!
with your click function, you already remove other selected classes. that means, within your table, there is only 1 tr that has selected class. So, You can just use it like :
$('.selected').find('.PFu1Exists');
by using find(), you will only search through its child / descendants. it wont find its siblings. you can read more from
You can use following code for this..
$("#search_results tr").click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
alert($(this).find('.PFu1Exists').html());
});
OR you can use -
alert($('tr.selected').find('.PFu1Exists').html());
You don't need to use find() function to search inside <tr>.
you can directly use
$('.selected .PFu1Exists')
which will select the child <td class='PFu1Exists'> inside <tr class='selected'>.
I want to identify an element which is a text "My Portal" from td tag. Below is my HTML
<tbody>
<tr>
<td>
<!-- rendered always true, custom column names are also label -->
My Portal
<!-- rendered always false, this feature is not required -->
</td>
</tr>
</tbody>
I have tried below xpaths as shown below, but none of them works:
1. .//td[text()="My Portal"]
2. .//td[contains(text(),"My Portal")]
After some search in the internet I found normalize-space() method which will remove the trailing and unnecessary white spaces. I have tried the method using the below xpath
.//td[normalize-space()="My Portal"]
Am able to identify the element, but in the firebug it is showing as 2 matching nodes. Please find the attachment for the highlighted elements in the firebug
My questions are:
Why two tags are getting highlighted?
Why .//td[contains(text(),"My Portal")] does not work?
How to identify the "My Portal" uniquely?
Can anyone please help?
There are several solutions. An efficient approach is to specify the exact path from the root node to the td you want. Something like
/html/body/table/tbody/tr/td/table/tbody/tr/td[normalize-space()='My Portal']
If you know that there are no more than two nesting tables, you can shorten this to
//td//td[normalize-space()='My Portal']
If you want the td in the innermost table regardless of table structure, try
//td[not(.//table) and normalize-space()='My Portal']
This isn't very efficient though. If you know that the text "My Portal" appears in an immediate text child of td, try
//td[text()[normalize-space()='My Portal']]
To uniquely identify the second td, what you have to do is add an additional filter. So if you look at the difference between the 2 tags highlighted, the parent has a class and the child doesn't. So if you need the second td, the xpath would be //td[normalize-space()='My Portal' and not(#class='rich-table-cell')]
If you need the parent then: //td[normalize-space()='My Portal' and #class='rich-table-cell']
Instead of using text() try .
.//td[contains(.,"My Portal")]
To Answer your questions:
1- Because you are using a global selector, "//", with this selector XPAth will find all the elements into the tree, so if you want select only one td you should specific the path, something like this
/table/tbody/table/td[contains(text(),"My Portal")]
2- The command that you are using it should work, I already tried, check your path again, maybe you are not selecting his parent or you are starting from the wrong path.
function xpath(){
var input = document.getElementById("xpath").value
var cell = document.evaluate( input, document, null, XPathResult.ANY_TYPE, null );
var cellvalue = cell.iterateNext();
console.log(cellvalue);
alert(cellvalue.data);
};
<html>
<head>
</head>
<body>
<input type="text" id="xpath" value='//body/table/tbody/tr/td/table//td[contains(text(),"My Value")]/text()'/> <input type="button" onclick="xpath()" value="Execute"/>
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
My Value
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Given,
<table id=ThisTable>
<tbody>
<tr>
<td id="ThisCell">
</td>
</tr>
<tr>
<td id="NotThis">
</td>
</tr>
<tr>
<td id="NorThis">
</td>
</tr>
</tbody>
</table
How can I use JQuery/Javascript to assign the ID of the first table cell in #ThisTable to the variable "Selected"?
The result in this case should look like:
var Selected = "ThisCell";
I need to get the first cell's ID without having any knowledge of what the ID is, probably using the :first selector. In addition, this isn't the only table on the page, so it must be referenced with its ID.
var Selected = $('#ThisTable td:first').attr('id');
This selects the first td element that is a descendant of the element with ID ThisTable, returns its id attribute and assigns it to Selected.
JSFiddle
Just:
$("#ThisTable tbody tr:first td:first").attr("id");
This code gets the first td of your table, then stores its id in a variable Selected.
var Selected = document.querySelector("#ThisTable td").id;
Pure DOM methods, fastest method here, and works on 91.71% of browsers according to Can I use.
$(function () {
console.log($($('#ThisTable').find('td')[0]).attr('id'))
});
http://jsfiddle.net/E9mPw/17/
I am trying to dynamically insert links to return to the top of the document at the end of every section of a web page (sad to say, but it's table-based layout). I'm using the jQuery filter() selector, and while I get no error, it's not making any changes in the browser output. When I use alert() with the variable, it says Object object. I understand that the problem is in the line where I define the filter itself, but I was unable to find a similar example, and I don't know how to fix it.
Here's the code:
HTML
<table>
<tr class="head"><td colspan="2">section title 1 </td></tr>
<tr><td>text</td>
<td><img /></td>
</tr>
<tr><td>text</td>
<td>< img /></td>
</tr>
<tr class="head"><td colspan="2">section title 2 </td></tr>
<tr><td>text</td>
<td><img /></td>
</tr>
<tr><td>text</td>
<td>< img /></td>
</tr>
<!-- you get the point -->
JavaScript
$(document).ready(function(){
var lastRow = $('tr').filter(function(){
return $(this).next()==$(".head"); // Here's the problem, IMO
});
var a = '<tr class="toTop"><td class="top" style="text-align:right" colspan="2">go to top ↑</td></tr>';
lastRow.after(a);
});
The script attempts to select each row that precedes a row with class="head" and insert a row with a top link.
That's because you are comparing 2 different objects that is always false, you should use is method or length property:
var lastRow = $('tr').filter(function(){
return $(this).next(".head").length;
// return $(this).next().is(".head");
});
However, I'd suggest using .prev() method:
$('tr.head').prev(); // selects the previous sibling tr element
sample html:
<tr>
<td class="hidden tblLnk">8163</td>
</tr>
<tr>
<td class="hidden tblLnk">8163</td>
</tr>
<tr>
<td class="hidden tblLnk">8164</td>
</tr>
this method should return a unique array of text from rows with a specific td class. { 8163, 8164 } in our sample.
works in ffs and chrome but not in ie8 or safari. can you spot the problem?
function getUniqueIds()
{
var tblLnks = new Array();
$('td.tblLnk').each(function()
{
tblLnks.push($(this).text().trim());
});
return tblLnks.unique();
}
I think this:
$(this).text().trim()
should be this:
$.trim($(this).text());
If your intention is to us jQuery's trim() function.
1st: There is no native unique() method on the Array object in JavaScript that works in all A-grade browsers as of today. So if this is your intention, please post that code aswell.
2nd: If you refer to the unique() method of jQuery you better read up on the description of that method. This method can´t be called on the Array object. It takes an Array object of DOM elements as a paramenter, e.g.:
$.unique(myArrayOfDomElements);