How get only first td element [duplicate] - javascript

This question already has answers here:
How to select first child?
(6 answers)
Closed 4 years ago.
Suppose to have this html code:
<tr id="row_1">
<td>1</td>
<td>Text</tr>
</tr>
<tr id="row_2">
<td>2</td>
<td>home</tr>
</tr>
<tr id="row_n">
<td>n</td>
<td>n row</tr>
</tr>
I need to take only the first td element in a row, so I do:
$('[id^="row_"] > td ').each(function(){
});
But this jquery code it doesn't work because it gets me all first td children of tr but I want only the first td child of tr. Anyone can help?

Maybe with this:
$('[id^="row_"] > td:first-child')

You should use :first-child
You can do this using .each().
Example:
$('td:first-child').each(function() {
console.log($(this).text());
});

you can use :first-child like this:
var firstTd = $('td:first-child');
ref: https://api.jquery.com/first-child-selector/

Related

How do I find the ID of an element that was clicked? [duplicate]

This question already has answers here:
Getting the ID of the element that fired an event
(24 answers)
Closed 5 years ago.
Say I have an many html elements, a row in a table composed of table data (<td>) tags.
<td id="data1">foo</td>
<td id="data2">bar</td>
<td id="data3">baz</td>
How would I return the id of the td that was clicked. I know that I should make them links so that I can click on them properly, but just for this case I don't want to put links.
$("td").click(function () {
id = //The ID finder goes here
clickFunction(id)
}
I was thinking this is how it would be formatted. JQuery would attach an onclick event listener to any table data tags and when it fired, a function would run with the id of the table data element that was clicked.
Use this code: $(this).attr('id').
Simply, this.id:
$("td").click(function() {
console.log(this.id)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="data1">foo</td>
<td id="data2">bar</td>
<td id="data3">baz</td>
</tr>
</table>

jQuery Selector after id

i cant figure out the correct selector for a table.
<tr id="test1">
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2">\*SELECT THIS \*</td>
</tr>
I want to select tr with id and chose the input of of the 2nd tr "*SELECT THIS*"
$("#test1").next()
So i'm inside the 2nd tr, but i want the td under this tr.
$("#test1").next().$("td") is not working.
Any ideas?
$("#test1").next().children('td');
From the sibling, you then need to delve into its children. More concise would be:
$('#test1 + tr td');
Close! Use .children();
$("#test1").next().children('td');
use this
$("#test1").next().find('td');

Jquery select first parent of <td> tag in HTML table

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().

add a new row in a table [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Add table row in jQuery
I want to add a new row to my table on a change event. Here is what I have so far:
$('#CourseID').change(function() {
$('#CourseListTable > tr > td:last').append('<td>...</td>');
});
Here is my table:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<table id="CourseListTable">
<tr>
<th>Course ID</th>
<th>Course Section</th>
<th>Level</th>
</tr>
<tr>
<td><select name="CourseID" id="CourseID"></select></td>
<td><select name="CourseSection" id="CourseSection"></select></td>
<td><select name="Level" id="Level"></select></td>
</tr>
</table>
I am not able to get this to work. I am missing something over here can anyone let me know where my error lies?
Thanks in advance.
You mention append Row but in your code you are appending just cells.
If you need to actually append a full row, try this:
$('#CourseID').change(function() {
$('<tr/>').append('<td>...</td>').insertAfter('#CourseListTable tr:last');
});
This line:
$('#CourseListTable > tr > td:last').append('<td>...</td>');
appends a TD (<td>...</td>) to an existing TD (td:last); you want to append it to a TR, eg.
$('#CourseListTable > tr').append('<td>...</td>');
Of course, you mentioned wanting to add a new row, in which case you shouldn't be appending a <td> at all, you should be appending a <tr> (and you should append it to the table, obviously).
$('#CourseID').change(function() {
$('#CourseListTable > tbody > tr:eq(1)').append('<td>...</td>');
});
If you want to add a new row you have to add a tr
$('#CourseListTable tr:last').after('<tr><td>...</td><td>...</td><td>...</td></tr>');
You should use after instead, append will append the element inside the tr.
$('#CourseID').change(function() {
$('#CourseListTable tr:last').after('<tr><td>test</td><td>test</td><td>test</td></tr>');
});
follow this:
Customizing JQuery Cloned row attributes
It lets you clone, append and then customize each cell.. very flexible.

jQuery find highest parent TD

I'm working on a code for a form contained within a table. I'm writing (with jQuery) a function to highlight the parent <td> of each <input> element. That part is simple - the code is just:
$('.myForm input').click(function(){
$(this).parent().addClass('active');
})
The more complicated part is that some text fields are inside of a second table nested within a <td> of the first table. It would look like:
<table>
<tr>
<td> <--cell I want to add the class to
<table>
<tr>
<td><input type='text'></td>
</tr>
</table>
</td>
</tr>
</table>
So my question is this: is there a way to use one jQuery statement to find the highest parent <td> of the <input> element? So in other words, can I combine:
$('.myForm input').click(function(){
$(this).parent().addClass('active');
})
and
$('.myForm input').click(function(){
$(this).parent().parent().addClass('active');
})
into one function?
The best solution is to add a class to the table you actually want to target. This means that you could update the markup in future without necessarily breaking the JS, by doing something like $(this).closest('.targetElement').addClass('active').
If you can't do that, you can use parents('td').last(). This selects all td parent elements and then gets the last one.
$('.myForm input').click(function(){
$(this).parents('td').last().addClass('active');
})
See the jQuery manual:
closest
parents
last
Try doing this:
$('.myForm input').click(function(){
$(this).parents('td').last().addClass('active');
})
I'd suggest trying:
$(this).parents("td").last()
It will find all table cell ancestors of the current element. The last one should contain the highest level table cell element.
you can try:
$(this).parents('td:last');
or
$(this).parents('td').last();
Give your top-level td element a class name:
<table>
<tr>
<td class="topTD"> <--cell I want to add the class to
<table>
<tr>
<td><input type='text'></td>
</tr>
</table>
</td>
</tr>
</table>
$('.myForm input').click(function(){
$(this).closest('td.topTD').addClass('active');
});
Quick&dirty :)
$(this).parents('td')[--$(this).parents('td').length]

Categories