Hey all I am trying to get the element from the HTML below:
<tr role="row" class="odd">
<td class="sorting_1" data-uid="408bd653-c1bf">test2</td>
<td>test22</td>
<td>
<button id="deleteButton" onclick="deleteHit(this);" type="button" data-uid="408bd653-c1bf" class="btn btn-danger btn-embossed">Delete Record</button>
</td>
</tr>
The jQuery code I have tried:
$("td[data-uid='" + uid + "']").parent().prev().fadeOut('slow');
The uid has the number 408bd653-c1bf value.
So I am not sure why its not finding the previous TR parent.
I think you should add a class to each button if you want to have many of them, not an id.
Like this:
<tr role="row" class="odd">
<td class="sorting_1" data-uid="408bd653-c1bf">test2</td>
<td>test22</td>
<td>
<button type="button" data-uid="408bd653-c1bf" class="btn btn-danger btn-embossed deleteButton">Delete Record</button>
</td>
</tr>
Then the JQuery:
$(".deleteButton").click(function(){
var parent = $(this).closest("tr");
$(parent).fadeOut(function(){
$(this).remove();
});
});
JSFiddle
EDIT:
If you want the previous tr to be deleted, try this:
$(".deleteButton").click(function(){
var parent = $(this).closest("tr").prev("tr");
$(parent).fadeOut(function(){
$(this).remove();
});
});
JSFiddle
You can pass a selector to the parent method, something like this:
$("td[data-uid='" + uid + "']").parent("tr").prev().fadeOut('slow');
Try this to hide parent tr element:
function deleteHit(el){
$(el).closest('tr').fadeOut('slow');
}
Or to hide previous tr element:
function deleteHit(el){
$(el).closest('tr').prev().fadeOut('slow');
}
NOTE, when using onclick attribute, you're passing this (clicked button) to the method. You should then add the button as argument (el) in your method, as shown above deleteHit(el)
There is no previous td. If your table looks like this:
<table>
<tr></tr> <!--- This gets hidden -->
<tr role="row" class="odd">
<td class="sorting_1" data-uid="408bd653-c1bf">test2</td>
<td>test22</td>
<td>
<button id="deleteButton" onclick="deleteHit(this);" type="button" data-uid="408bd653-c1bf" class="btn btn-danger btn-embossed">Delete Record</button>
</td>
</tr>
</table>
Because:
$("td[data-uid='" + uid + "']") selects <td class="sorting_1" data-uid="408bd653-c1bf">test2</td>
.parent() selects <tr role="row" class="odd">
.prev() selects the previous element, which either is the previous <tr> or if there isn't a previous row is nothing at all.
If you want to fade out the current row (that the delete button is in) you would do this:
function deleteHit(el){
$(el).closest("tr").fadeOut('slow');
}
Now there's a much nicer way of doing this. Change your button definition to have a class (since you'll have more of them and you're only allowed one id on the whole page):
<button data-uid="408bd653-c1bf" type="button" class="btn btn-danger btn-embossed js-delete">Delete Record</button>
<script>
$(".js-delete").click(function(){
$(this).closest("tr").fadeOut("slow", function(){
// Remove the element from the DOM when the animation is done.
$(this).remove();
});
});
</script>
Related
I am using a button in a table and my button is a single element but on top, I am changing the row of the table based on some condition, so when my final table created is I see button in all rows, which is fine and as per the requirement.
Now I need to use a function on button click which I want to perform the same action in each row to remove the row where the button is placed. when I am using a single function it's working only for first time and not after that, how can I use the same function for all buttons?
here is my code:
function AddValueinrow() {
if(anotherTeamname=='DEV'){
if(selectedValue=="dummy value1"){
row = document.getElementById("DEVFirstrow");
}
if(selectedValue=="dummy value2"){
row = document.getElementById("DEVSecondrow");
}
var w = row.insertCell(6);
w.innerHTML = '<button onclick="Releaseentry()" type="button" id="show" class="btn btn-primary">Release</button>';
}
function Releaseentry() {
if(anotherTeamname=='DEV'){
if(selectedValue=="dummy value1"){
$('#DEVmyTable > tr').eq(0).children('td').remove();
}
if(selectedValue=="dummy value 2"){
$('#DEVmyTable > tr').eq(1).children('td').remove();
}
}
}
Find the parent row by using .closest(), and remove it.
Note: Instead of using inline onclick calls, use event delegation to attach a single event handler to the container, and react to button clicks.
$('#table').on('click', 'button', function() {
$(this)
.closest('tr')
.children('td:not(:last-child)')
.remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table">
<tbody>
<tr>
<td>td11</td><td>td12</td>
<td>
<button type="button" class="btn btn-primary">Release</button>
</td>
</tr>
<tr>
<td>td21</td><td>td22</td>
<td>
<button type="button" class="btn btn-primary">Release</button>
</td>
</tr>
<tr>
<td>td31</td><td>td32</td>
<td class="button">
<button type="button" class="btn btn-primary">Release</button>
</td>
</tr>
</tbody>
</table>
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.
I have a table (generated at run time) and a dropdown. Before the page is up, the table does not exist. Once the page is up, the table and the dropdown look similar to this fiddle:
$("#aDropDown").val($("WhatToPutHere?").text());
I am trying to do the following: when the user select the Select button, I need the dropdown selected item to match the Type for the row.
Any example would be appreciated.
Thanks
Mike
first, you have multiple button with the same id. They should share a class.
<button class="aButton">Select</button>
next, what you want is the .text() of the prev <td>
$('.aButton').on('click', function() {
var type = $(this).closest('td').prev('td').text();
$("#aDropDown").val(type);
});
JSFIDDLE
as #Mackan pointed out, you might encounter a problem if you're not using a
delegated event, as you're creating the table dynamically. in that case the following code would work better :
$(body).on( 'click', '.aButton' , function() {
var type = $(this).closest('td').prev('td').text();
$("#aDropDown").val(type);
});
$('.aButton').click(function(e) {
var btn = $(e.target);
$("#aDropDown").val(btn.data('category'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<td>item</td>
<td>Type</td>
<td>Action</td>
</thead>
<tr>
<td class="anItem">Apple</td>
<td class="aType">Fruit</td>
<td>
<button class="aButton" data-category="Fruit">Select</button>
</td>
</tr>
<tr>
<td class="anItem">Orange</td>
<td class="aType">Fruit</td>
<td>
<button class="aButton" data-category="Fruit">Select</button>
</td>
</tr>
<tr>
<td class="anItem">collard</td>
<td class="aType">Veggie</td>
<td>
<button class="aButton" data-category="Veggie">Select</button>
</td>
</tr>
</table>
<br/>
<br/>aDropDown:
<select id="aDropDown">
<option value="Fruit">Fruit</option>
<option value="Veggie">Veggie</option>
</select>
Removed id attribute from each button (id should be use for unique elements).
Added aButton class to each button.
As I said above, your code must run on some event. Here's how I'd do it with minimal markup changes (just a class on the buttons):
$('.selectBtn').click(function() {
var myVal = $(this).closest('tr').find('.aType').text();
console.log(myVal);
$("#aDropDown").val(myVal);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<td>item</td>
<td>Type</td>
<td>Action</td>
</thead>
<tr>
<td class="anItem">Apple</td>
<td class="aType">Fruit</td>
<td>
<button id="aButton" class="selectBtn">Select</button>
</td>
</tr>
<tr>
<td class="anItem">Orange</td>
<td class="aType">Fruit</td>
<td>
<button id="aButton" class="selectBtn">Select</button>
</td>
</tr>
<tr>
<td class="anItem">collard</td>
<td class="aType">Veggie</td>
<td>
<button id="aButton" class="selectBtn">Select</button>
</td>
</tr>
</table>
<br/>
<br/>aDropDown:
<select id="aDropDown">
<option value="Fruit">Fruit</option>
<option value="Veggie">Veggie</option>
</select>
Since you said your table is created dynamically, you should use a bind to a persistent element, using a delegated event (like document or body):
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers
All of the other answers (time of writing) uses binds that will add the event handlers to the actual buttons. This means that if the button doesn't exist, or gets temporarily removed, the bind will be lost or can't be created to start with.
Using a delegated event:
$(document).on('click', '.aButton', function() {
or..
$('body').on('click', '.aButton', function() {
Also notice that the above binds use a class selector, .aButton, because id's must be unique (and yours were not).
<button class="aButton">Select</button>
Full example at jsFiddle:
$(document).on('click', '.aButton', function() {
$("#aDropDown").val($(this).parent().prev('td').text());
});
Edit:
If the table structure is in danger of changing (adding more td's or tr's), the below script will be better at finding the correct td (by class .aType):
$(document).on('click', '.aButton', function() {
$("#aDropDown").val($(this).closest('tr').find('.aType').text());
});
I have this HTML:
<table>
<tr>
<td colspan="2"> Some text </td>
</tr>
<tr>
<td> Some text </td>
<td>
<div class="btn-group">
<a class="btn btn-link" href="/pingenieros/web/app_dev.php/admin/pi/proyecto/proyectos/create"><i class="icon-plus"></i>New</a>
<a class="btn btn-link" href="/pingenieros/web/app_dev.php/admin/pi/proyecto/proyectos/list"><i class="icon-list"></i> List</a>
</div>
</td>
</tr>
<tr>
... many others tr ...
</tr>
</table>
I need to remove using jQuery the first a element in the second tr meaning the one with New text, any advice?
Note: My bad a made a typo
Try
Shortest code
$('tr:eq(1) a.btn-link:first').remove();
$('tr:eq(1) a:first').remove();
$('tr:eq(1) a:contains("New")').first().remove();
For exact match remove
$('tr:eq(1) a').filter(function(){
return $(this).text() === 'New';
}).first().remove();
Reference
:eq()
:first
:contains()
.first()
.filter()
it has a div parent
so it doesn't really matter that it's in a td...
$('.btn-group:eq(0) a:eq(0)').remove();
or to repeat for all .btn-group:
$('.btn-group a:eq(0)').remove();
made a fiddle: http://jsfiddle.net/filever10/TFSem/
How can I get the id of tbody's input when #moveToAnTable is clicked using jQuery? Thanks.
<table id="yearSectionAdd2Table">
<thead>
<tr id="columnHeader">
<th>
<div>
<input id="moveToAnTable" type="button" value="<<">
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<center>
<input id="moveToAnTableOne" type="button" value="<<">
</center>
</td>
</tr>
</tbody>
</table>
Use jQuery.closest to get the table of the button.
After that search for the input.
jQuery.attr will return the attribute of the first element in the match:
$("#moveToAnTable").click(function(){
var id = $(this).closest("table").find("tbody input").attr("id");
alert(id);
});
See the fiddle:
http://jsfiddle.net/URGVp/
You can also write it like this with the on method, and test out your results in a console window if that better suits you, rather than constant pop-ups.
$('#moveToAnTable').on("click",function(){
var mvalue = $(this).closest('table').find('tbody input').attr('id');
console.log('my value is: ' + mvalue);
});