How to get text of next td in jQuery? - javascript

I need Test 2 text when I clicked on "Click". I have tried like this ...
$("#clicked").click(function(){
alert( $('this').closest('td').next('td').next('td').text());
})
But In alert there is empty. How I can get Test 2 ?
<tr>
<td> </td>
<td><a id = 'clicked'>Click</a></td>
<td>Test 1</td>
<td><a id = 'clicked2' /> Test 2</a></td>
</tr>
From comment below:
this means $('#clicked'). That means when I clicked on the Click link.

you need to use parent instead of closest :
$("#clicked").click(function(){
text = $(this).parent().next('td').next('td').text();
alert(text);
})
https://jsfiddle.net/g6gnog4h/

$('#clicked').click(function(){
console.log($(this).closest('td').next().text());
});

Try this one, as you need to go parent tr and than find the 4th td with the ID of a tag to get the text.
<table><tr>
<td> </td>
<td><a id = 'clicked'>Click</a></td>
<td>Test 1</td>
<td><a id = 'clicked2' /> Test 2</a></td>
</tr>
</table>
<script>
$('#clicked').click(function(){
alert($(this).parents('tr').children().find('#clicked2').text());
});
</script>

You may try like this:
$('#clicked').click(function(){
var val=$(this).siblings().text();
alert(val);
});
siblings() method returns all sibling elements of the selected element.

Related

How to get the text value of the row that was just deleted-Jquery/Js

I have a Delete link on clicking of which deletes the row in a table.
<table id="cont">
<tbody>
<tr>
<td>
<label>account name</label>
</td>
</tr>
<tr>
<td>
<label>type</label>
</td>
</tr>
<tr>
<td><a class=delete href='/url/delete'>Delete</a></td>
</tr>
</tbody>
</table>
here is the js im trying to find the row that i just deleted:
$('.delete').on('click', function(e) {
var $this = $(this);
$this.parent().remove();
//how to get the <tr> that just deleted
alert("deleted" +tr-value-deleted);
});
any ideas appreciated!!
Thanks..
I don't know what you mean by value, bit if you mean the innerHTML, you can first store it and then delete the element.
var deleted = $this.parent().html();
$this.parent.remove();
alert("deleted " + deleted);
It depends what you want as the 'value' mate!
if you want the id of the table you would do
$(this).closest('table').attr('id');
If you want account id or type you could easily do
$(this).closest('table').find('lable');
which should give you an array with the two elements inside
You can cache the cell first and get the outerHTML later.
$('.delete').on('click', function(e) {
var $p = $(this).parent();
$p.remove();
//how to get the <tr> that just deleted
alert("deleted " + $p[0].outerHTML);
});
Fiddle here.

Jquery how to retrieve / replace value in <span> <tr> <td> value?

There are more than one TR TD, same class name given in a table used for formatting without ID given.
I would like to seek help for jQuery. How can I retrieve / replace <td> content in the span id = payment_currency_text, class="formdata element?
1) To set a variable, store as SGD, getting from second set of TR TD.
2) Replace SGD to EUR.
Note : The system used Jquery version = v1.4.2
I tr to used below syntax but no luck :
alert(jQuery("#payment_currency_text tr.find(.formdata)").val());
alert(jQuery("#payment_currency_text").next('.formdata').val());
alert(jQuery("#payment_currency_text tr td.formdata").val());
alert(jQuery("#payment_currency_text").find(".formdata").html());
... (tr td child)
<tr>
<td class="prompt" align="left">
Region*
</td>
<td class="formdata" align="left">
Asian
</td>
</tr>
<span id ="payment_currency_text"> <!--- There is a SPAN tag, with ID given --->
<tr>
<td class="prompt" align="left">
Payment currency*
</td>
<td class="formdata" align="left">
SGD <!--- How i can set a variable to hold SGD, then replace to EUR? --->
</td>
</tr>
</span>
to target td.formdata inside span.Try this:
To get:
var currency=$('#payment_currency_text .formdata').html();//currency will be SGD here
To set:
$('#payment_currency_text .formdata').html('EUR');
If you know that its always going to be a specific child you can use the :nth-child() selector.
var setter = $("tr:nth-child(2) td:nth-child(2)").text();
$("tr:nth-child(2) td:nth-child(2)").text("EUR");
alert(setter)
Here is a fiddle http://jsfiddle.net/87V9v/
In jQuery you can replace the inner HTML of an element like so
$('.class-name').html("Some html in here");
However, be careful because this will replace the HTML for all classes of this name.
You can use text() to get the data (plain text) as well as replace existing data with new one. If your replacement is HTML, you can use html()
var data=$('td.formdata').text();
alert("The value is"+data);
$('td.formdata').text("New Data");
You can use:
$("#payment_currency_text").text("your text");
or
$("#payment_currency_text").html("your<b>text</b>");
If you just want to change the html inside the td, use like this
$(".formdata").html("some text or tags here");
If you want to get the text inside those td, use like this
$(".formdata").each(function(){
$(this).html();
});
Edit
$("#payment_currency_text").find(".formdata").html()
$("#payment_currency_text").find(".formdata").html("some text or tags here");
Your html structure has some problem, you cant enclose tr inside span. tr should be the child of table. So change your html accordingly.
<table>
<tr>
<td class="prompt" align="left">
Region*
</td>
<td class="formdata" align="left">
Asian
</td>
</tr>
<tr id="payment_currency_text">
<td class="prompt" align="left">
Payment currency*
</td>
<td class="formdata" align="left">
SGD
<!--- How i can set a variable to hold SGD, then replace to EUR? --->
</td>
</tr>
</table>
Then you can use the above code for getting the elements and values.

jQuery replace and add new element

I have the following HTML
<tbody class="t_bdy">
<tr class="Quotation_List_td">
<td class="item"><a class="button2 crm_insert" href="#">Insert</a><a class="button2 crm_delta" href="#">Delete</a></td>
<td class="Quotation_List_ItemTD description"> </td>
<td class="quantitiy"> </td>
<td class="unit_price"> </td>
<td class="discount"> </td>
<td class="total"> </td>
</tr>
<tr class="Quotation_List_td">
<td class="item"><a class="button2 crm_insert" href="#">Insert</a><a class="button2 crm_delta" href="#">Delete</a></td>
<td class="Quotation_List_ItemTD description"> </td>
<td class="quantitiy"> </td>
<td class="unit_price"> </td>
<td class="discount"> </td>
<td class="total"> </td>
</tr>
</tbody>
I need to insert new <tr> when I click on button with .crm_insert class.
When .crm_insertis clicked, it need to insert a new row at the current location. All
other rows will move down. For example, if insert against row 3 is clicked then
row 3 will be new row inserted and current row 3 etc will move down to become
row 4 etc.
How can I achieve this ?
All answers are good, but I can only accept one : Thanks all
I'd try something like this using closest() and before()
$('a.crm_insert')
.click(function()
{$(this).closest('tr.Quotation_List_td').before(htmlcodeofyounewTRhere);}
)
Hope this will help
Assuming:
Your new row is in the same structure as your current row
You want the new row to also have the 'Insert' functionality
You want a click event handler which does something to this effect:
$('.crm_insert', '#table').on('click', function() {
var currentRow = $(this).closest('tr');
currentRow.clone(true).insertBefore(currentRow);
});
Where #table is the id of your table.
Here's a simple example
If you are inserting something completely different, then you do not need to use on() or clone(), and the code becomes simpler:
$('.crm_insert').click(function() {
var currentRow = $(this).closest('tr');
$('<tr />').insertBefore(currentRow);
});
Where <tr /> would be whatever you are trying to insert.
This might work for you. It'll find the parent tr of the button you just clicked, clone it (including the onClick functionality of the button) and insert that before the parent tr. This will result in a new row containing the same information as the target row though. Depending on what results you want to show in the new row, you might want to alter the code to clear out any copied values too.
$(".crm_insert").live("click", function(){
var tr = $(this).parents("tr.Quotation_List_td");
tr.clone().insertBefore(tr);
});
You can try this
$('.crm_insert').live('click', function(){
var self = $(this);
self.parents('tr.Quotation_List_td').before('add your row here');
});
The latest versions of jquery employ on instead of live.

which jquery selector to do this?

<div id="m101">
<table class="tablec" width="80%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><span class="name">My Name</span></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><span class="clickme">clickme</span></td>
</tr>
</table>
</div>
Which selector should I use to capture the content of "name" if clickme is clicked? There are more than one of those tables with the same classes, but the surrounding divs are unique. The name is different each time.
I've been experimenting the with parent, parents and closest functions so far without luck.
$(".clickme").click(function(){
var name = $(this).closest('.name').text();
alert(name);
});
Would something like this do the trick?
$(".name", $(this).closest("div")).text()
Working example here: http://jsfiddle.net/44re8/
You can traverse the tree up until you hit a <table>:
var name = $( this ).closest( 'table' ).find( '.name' ).text();
You are not able to select the .name using closest() as it is not an ancestor. You would need to select a common ancestor e.g. the table and then work back down the tree to the .name element.
$(".clickme").click(function(){
var table = $(this).closest("table");
var name = table.find('.name').text();
alert(name);
});
You could have this in a single line using
$(".clickme").click(function(){
var name = $(this).closest("table").find('.name').text();
alert(name);
});
This did the work for me
function() {
$(".clickme").click(
function(e) {
alert($(this).parents("div").find(".name").html());
}
);
}
Simplest of answers -
$(document).ready(function(){
$('.clickme').click(function(){
var getName = $('.name').text();
alert(getName);
});
});

Quickest way to find an element with jQuery

Given the following html:
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
<td><img id="imgProductPurchased" runat="server" visible="true" alt="Product Purchased" title="Product Purchased" src="/sitecore/shell/Themes/Standard/Applications/16x16/checkbox.png" /></td>
<td>
<asp:PlaceHolder ID="plhPurchased" runat="server">
<span class="roundButton roundButtonLarge"><a id="hypPurchased" class="registryPurchased" href="#" title="Mark product as purchased" runat="server"><span>
<em class="registryPurchased"></em>Purchased</span></a> <span class="buttonEndLarge">
</span></span>
</asp:PlaceHolder>
</td>
</tr>
<tr>
Repeats above
</tr>
I have a click event on "hypPurchased". When that event fires, I need to access the plhPurchased element, and "imgProductPurchased" elements of THAT row.
EDIT:
I should have stated that this is being built with ASP.NET, and as such, the id's are all unique.
If the click event is on the particular row and the element is a child of that row, you can use context to get the result.
$(".myRow").click(function() {
var somethingFromMyRow = $(".myChildClassName", this).text();
alert(somethingFromMyRow);
});
Please note, you shouldn't be duplicating the same ID anywhere on your page, so the example I have supplied uses a class name instead - so imagine you have HTML like this for your example.
<tr class="myRow">
<td><span class="myChildClassName">Some Text In Row 1</span></td>
<td>More Stuff</td>
</tr>
<tr class="myRow">
<td><span class="myChildClassName">Some Text In Row 2</span></td>
<td>More Stuff</td>
</tr>
<tr class="myRow">
<td><span class="myChildClassName">Some Text In Row 3</span></td>
<td>More Stuff</td>
</tr>
id's can't be duplicated in HTML,
Anyway, what you need to do is get to a parent element (go up in the hierarchy until you get the parent element that encompasses the "current" row), then you run the query against it:
jQuery( your_query_string, parent )
Where parent is something you can get using:
parent = query.parent()
For instance:
function click_handler(element)
{
parent = jQuery(element).parent()
name = jQuery(".name", parent)
// do stuff
}
name = jQuery(".name", parent) will get all elements with class name under the parent element.
has Hasen said, you cant duplicate id's in html.
so, apply a class to "plhPurchased" and then:
at the hypPurchased you put onclick="yourFuntion(this)"
function yourFuntion(elem)
{
var tr=$(elem).closest('tr');
var _imgProductPurchased = tr.find('img');
// if you have more then a img per row, you should apply a class to the image to and get it by:
// tr.find('.imgClass');
var _plhPurchased=tr.find('.thatClassYouApplyed');
}

Categories