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/
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'>.
This is my code:
<tbody>
{#participants}
<tr>
<td id="id">{.fullName}</td>
</tr>
{/participants}
I am writing this code in .dust file. I want to append row index value to my td's ID. Is there any way to do it? Thanks in advance!
Do you want the index from your database row? Then you might want to to something like:
<td id="id_{.id}">{.fullName}</td>
...where {.id} contains the value of the ID of the row. this would be the best method, as it required no javascript, this method is fastest.
{$idx} will give you the current index.
Example
<tr>
<td id="id_{$idx}">{.fullName}</td>
</tr>
I am using cheerio which is like jQuery for node.js, but :first is not available.
I want to use something like
var title = $(this).find('td:not([rowspan]):first').text();
So when I am grabbing data I can ignore all td elements that have [rowspan]. For most of the data it looks like
<tbody>
<tr>
<td>Title</td>
<td>somethingelse</td>
</tr>
<tr>
<td>Title</td>
<td>somethingelse</td>
</tr>
<tr>
<td>Title</td>
<td>somethingelse</td>
</tr>
<!-- SOMETIMES THERE IS AN UNRELATED TD IN THE FIRST -->
<tr>
<td rowspan="2" style="text-align:center; background:#ffdacc; textcolor:#000;"><b>3</b></td>
<td>Title</td>
<td>somethingelse</td>
</tr>
</tbody>
Since there are no classes I need to grab the $('td:nth-child(1)') or $('td:first') element, but in some cases its actually the second element.
Use .eq(0):
var title = $(this).find('td:not([rowspan])').eq(0).text();
You need to use the :first-child or :first-of-type and not :first:
var title = $(this).find('td:not([rowspan]):first-child').text();
var title = $(this).find('td:not([rowspan]):first-of-type').text();
If the above both doesn't work, you need to loop through to satisfy the stuff and once done, you can break.
maybe you can use .eq(0) to get the first element of the colection
$('td').eq(0)
If this is referring to the tr then you can use .first()
var title = $(this).find('td:not([rowspan])').first().text();
you can use nth-child(1)
var title = $(this).find('td:not([rowspan]):nth-child(1)').text();
I'm using Jquery V1.11.1 in my application. I have a HTML table which looks like this:
<table id="permissions">
<tr>
<td></td>
<th>Administrators</th>
<th>Moderators</th>
</tr>
<tr>
<th class="aco">controllers/users/display</th>
<td class="permission">Allowed</td>
<td class="permission">Denied</td>
</tr>
</table>
When you click on "Allowed" or "Denied" I want to select the TH tag which contains the ACO.
I thought this would do it, but it doesnt. $(this).parent('th').text();
What is the best way to select the TH tag using Jquery in this situation?
Use
$(this).closest('tr').find('th.aco').text();
DEMO
or
$(this).siblings('th.aco').text();
DEMO
Use .siblings() in jquery
$(this).siblings('th.aco').text();
$('.permission').on('click', function(){
$(this).siblings('.aco').text();
})
or if more than one siblings has this class .aco
$('.permission').on('click', function(){
$(this).siblings('th.aco').text();
})
will select the th that is parallel to the clicked td and display it's text. You can perform a different function on selected th instead of .text().
I have a table and I am highlighting alternate columns in the table using jquery
$("table.Table22 tr td:nth-child(even)").css("background","blue");
However I have another <table> inside a <tr> as the last row. How can I avoid highlighting columns of tables that are inside <tr> ?
Qualify it with the > descendant selector:
$("table.Table22 > tbody > tr > td:nth-child(even)").css("background","blue");
You need the tbody qualifier too, as browsers automatically insert a tbody whether you have it in your markup or not.
Edit: woops. Thanks Annan.
Edit 2: stressed tbody.
Untested but perhaps: http://docs.jquery.com/Traversing/not#expr
$("table.Table22 tr td:nth-child(even)").not("table.Table22 tr td table").css("background","blue");
Here is some code I used to do nested checkbox highlighting within a table. I needed to be able to do a "check all/uncheck all" but only within at a single level within the nesting; that is, I didn't want child elements getting selected as well.
var parentTable = $(this).parents("table:first");
var exclusions = parentTable.find("table :checkbox.select");
var checkboxes = parentTable.find(":checkbox.select").not(exclusions);
I'd get the first table above the current one I was in, get all the checkboxes below this newly found parent table, then exclude them from the complete list of checkboxes I could find. Basically, I was finding every checkbox, but then excluding any child checkboxes I found.
The same could be adapted in your case; replace the checkbox selection with columns instead.
Why not to use the advantages of html ?
Instead of
<table>
<tr>
<td>
...
</td>
</tr>
</table>
Try
<table>
<tfoot>
<tr>
<td>
...
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
...
</td>
</tr>
</tbody>
</table>
You can use the <thead> tag too to manipulate headers.
And now you can call the selector on
$("table.Table22 tbody tr td:nth-child(even)").css("background","blue")
Did you test the following?
$("table.Table22 tr td:nth-child(even):not(:last-child)").css("background","blue")
This page defines a nice function for selecting a column
http://programanddesign.com/js/jquery-select-table-column-or-row/