Change text of specific <a> text using jQuery - javascript

I have an asp:Repeater that makes a table with a few <td>s and <tr>s. In each of the <tr>s, I have an <a></a>.
Now, on a certain event I want to change just the <a></a> tag in the <tr>.
So, I want to do something like:
$("a").text("I changed!");
, but I only want to change the <a>.text in one <tr>, not all the <a> elements on the page.
I am experimenting with .closest(), but unfortunately don't know enough about jQuery to make this functional.

if you have the target tr somehow, then you can use the following code to find the a tag inside that:
tr.find("a").text("text here");
How to find tr really depends on what context you are in and how your target tr is identified from others.
e.g. if it's the "first" tr you may say:
var tr = $("tr").first();
if it's the element that the event has happened for (e.g. click event):
var tr = $(this);
if you are in the event of a child element of target tr you may say:
var tr = $(this).closest("tr");

You should mark the <tr> with an Id so that you could identify it and then change the containing
So for example you could mark your <tr> with id 'myid' and do something like this in jquery:
$("#myid a").text("I changed!");
Or if you dont want to mark it with an Id then, you could use selectors if you know which it is.
For example getting the first would be:
$("tr:first a").text("I changed!");
Some references:
http://api.jquery.com/first-selector/
http://api.jquery.com/category/selectors/

Related

Change id of clone children in jQuery

I have a table on which I have a hidden line that I clone in order to add new lines dynamically.
var $clone = $('#table-invoicing').find('tr.hide').clone(true).removeClass('hide');
$('#table-invoicing').find('table').append($clone);
Each line have a id and a data-type.
The hidden line is set an id ending in 99.
I would like to change this id when I clone the hidden line.
I found similar topics, but for some reason I don't manage to include it in my script. When I clone the line, then there is 2 elements with same id, so a selector by id won't work.
I tried :
$clone.$('#invoicing-row-descr-99').attr("id", "newID");
but then it tells me that $clone is not a function.
Any idea ?
$clone.$('#invoicing-row-descr-99').attr("id", "newID");
but then it tells me that $clone is not a function.
Because $clone is an object. Just use attr or prop for the cloned element:
$clone.attr("id", "newID");//change cloned element id
As per your comment, use like this:
$clone.find('your_element').attr("id", "newID");
.prop() Is a good practice in current versions of jQuery.
$clone.prop("id", "yourId");
You'll need to use it before you are appending it.

jQuery find ID in a fieldset

I am trying to find a an ID of a select element inside a fieldset, I have tried
$('#fieldsetID select #idOfSelect');
And
$('#fieldsetID).find('select #idOfSelect');
Both appear as undefined in the JS console.
What am I doing wrong?
Cheers
Don't put space between select and it's id as it is the id of select not the children id of the select:
$('#fieldsetID select#idOfSelect');
Or,
$('#fieldsetID').find('select#idOfSelect');
You shouldn't prefix the id as the id attribute should be unique.
Just make sure the dom has loaded and you should be fine with:
$(function () {
var myElement = $('#idOfSelect'); // should get the element you need
console.log(myElement); // should show it in the console
});
You should only use the id of the element in the search and not prefix it with other elements. CSS selectors search 'right to left' so prefixing it when you are searching for an id serves no purpose.
Here is a jsperf test to show that prefixing with an id of a parent is slower.

How do you hide the first element in the first table?

I know that to hide the first element in a table is simply do (':first-child') but is there a way to specify that only the first element of the first TABLE needs to be removed?
In my situation the first element of every table is being hidden and I need to fix this.
I suppose you just target the first table, and then the first element, whatever that is ?
document.querySelector('table tr').style.display = 'none';
FIDDLE
as querySelector gets the first matching element, or in jQuery
$('table:first tr:first').hide()
FIDDLE
target the first table and the first td.
$('table:first td:first').hide()
DEMO
You can get a collection of all tables using document.getElementsByTagName("table"). Element zero of that collection ([0]) is the first table. You can then apply your first-child solution to element zero.
This does not require jQuery, nor that you assign an ID attribute to a specific table. (Assigning an ID attribute is probably more efficient if you know in advance which table is going to be first.)
Edited to add: I've tested this and it works, although it is revised from my first "it works" post. The first child element of TABLE is TBODY for a table that starts with a tr element, so what is really wanted is the first child of TBODY. It is probably better to descend the firstElementChild tree looking exspressly for a nodeName of "TR" and hide that. Look further down in this post for that approach.
Here is the simple code that works:
document.getElementsByTagName("table")[0].firstElementChild.firstElementChild.style.display = "none";
This is pure JavaScript, with no need for jQuery. Note that document.getElementsByTagName returns a live collection, so even if a table is added to the DOM, this will get the first one.
Do remember that the first element child of <table> (and then TBODY) is not necessarily <tr>. If you can be sure it is, or if you want the first element regardless, then what I've given will work for you. If you want to be sure it's a <tr> then a little more work will be needed.
This code finds and hides the first <tr> but will be less efficient because it gets two HTML collections:
document.getElementsByTagName("table")[0].getElementsByTagName("tr")[0].style.display = "none";
const tables = document.getElementsByTagName("table")
const firstTable = tables[0];
const firstRow = firstTable.rows[0];
firstRow.style.visibility = "hidden"; //hide
firstRow.style.visibility = "visible"; //visible
Here is a referrence.

How to select cell using jQuery id selector

I am getting ID of table cell using the following Javascript
var tempCell = e.target.parentNode.id;
Now I have to append a table in tempCell using jQuery like that
var htmlToAppend = '<table id="tbleSelectApproovers"></table>';
$(???).append(htmlToAppend);
I am not sure how to write the syntax to use id for the purpose to add table in td. What to write in place of question mark to add table in tempCell
You have to give id to td in id selector. Before id you need to give #
$('#idoftd').append(htmlToAppend);
If you can get the element by e.target.parentNode then you can pass it to jQuery method to make jQuery object out of it.
$(e.target.parentNode).append(htmlToAppend);
use escaping rule from selector http://api.jquery.com/category/selectors/
$('#e\\.target\\.parentNode\\.id').append(htmlToAppend);
or
$('[id="e.target.parentNode.id"]').append(htmlToAppend);
update:
$('#'+e.target.parentNode.id).append(htmlToAppend);
or
$('#'+tempCell ).append(htmlToAppend)
From the looks of it you are trying to append the element to the current elements parent so
var htmlToAppend = '<table id="tbleSelectApproovers"></table>';
$(e.target.parentNode).append(htmlToAppend);
easy way : keep an id or class attribute to the table cell like for example say
<td id="tablecellid">
now if you want to append anything keep it in a variable for readability
var data = ''
and do the following
$("#tablecellid").append(data);
Assuming your cell looks like this:
<td id='myfavcell'></td>
you would call
$('#myfavcell').append(htmlToAppend);
as jquery uses the css selector type (#) for locating element IDs.

How do I get the value of td using hierarchy?

<tr>
<td>#</td>
<td>2009</td>
<td><a class="delete_this">Click</a></td>
</tr>
I want to use jquery and get the text of 2nd (second) "td" when clicking the anchor. I want the "td" in the same tr as the anchor...
How do I do this?
So far I have
$(document).ready(function(){
$(".delete_this').click(function(){
var myNUmber = $(this).parent()....///And this i should write the code to get the text for second td in tr where the anchor belongs to
})
})
Here's a few ways:
$(this).parent().siblings("td:eq(1)").text()
If your looking for the cell before you can do it this way:
$(this).parent().prev().text()
var myNUmber = $(this).parent().siblings().get(1).text();
Details are here
$('.delete_this').closest('tr').children(':eq(1)') .text();
1) Get the .delete_this A tag
2) Get the parent TR
3) Get the 2nd TD
4) Get the Text of the 2nd TD
Your better adding just 1 click event by using .live rather than adding multiple click handlers, if you had a large table this will impact performance (think 100 separate bound events).
Also remember to prefix class selectors with nodeName if you can (here you are sure all delete_this are anchors)
$('a.delete_this').live('click', function(){
var myNUmber = $(this).parent().siblings().get(1).text();
});

Categories