Select div text next to clicked button within table row - javascript

Here is a sample table.
<table class="table table-bordered">
<tbody>
<tr>
<tr>
<td>Stuff<div id="ParentID" style="display:none">145689</div></td>
<td><button class="btn btn-small">Send</button></td>
</tr>
</tbody>
</table>
I want to select the text within the div tag where id=ParentID that is closest to that button clicked. I will have multiple row in the future so it has to be unique to that row.
I have right now
var qry = $(this).closest('#ParentID').text();
Doesn't work obviously

This is how it can be done:
$(".btn").on("click", function() {
var text = $(this).closest("tr").find("div").text();
// ...
});
Note that elements should have unique IDs, so there can't be several <div> elements with ID "ParentID". I hope you use it as example only.

try this
$(".btn").on("click", function() {
$(this).parent('tr').find('div#ParentID').text();
});

$('button').click(function(){
var dataYouWant = $(this).parent().find('div').html();
});

You could do this, which gives the result:
$('.btn').click(function() {
alert($(this).parent().prev().children('div').text());
});
Try it out here: http://jsfiddle.net/YLcjf/2/
(I guess you should benchmark all these solutions. Not sure if 'find' has some greedy algortithm penalty associated with it)

$("button").click(function(){
alert($(this).parents("tr")
.find("div#ParentID").text());
});
JS Fiddle to test: http://jsfiddle.net/leniel/suRfG/

Related

How to obtain text of a <td> element from another <td> element with jquery

I am trying to use a button inside a table division to set a variable as the same value as another division in the same row, but whenever I run my code (below), it returns the value of all the table divisions concatenated together. I am unsure why this was happening, so I replaced '.children()' with 'childnodes[0]' to try and get only the first name, but this just doesn't work and I don't why.
My html looks like this:
<table>
<tr>
<td>John</td>
<td>Doe</td>
<td><button>Get First Name</button></td>
</tr>
</table>
And my Javascript is this:
$(document).ready(function(){
$("button").click(function(){
var first = $(this).closest("tr").childNodes[0].text();
alert(first)
})
});
set a variable as the same value as another division in the same row
there are lots of possibilities for this, here are some (with the most useful first (opinion based))
$("button").click(function() {
var first = $(this).closest("tr").find("td:first").text();
var first = $(this).closest("tr").find("td").first().text();
var first = $(this).closest("tr").find("td").eq(0).text();
var first = $(this).closest("tr").children().first().text();
var first = $(this).closest("tr").children().eq(0).text();
var first = $(this).closest("td").siblings().first().text();
});
it returns the value of all the table cells concatenated together
https://api.jquery.com/text
Get the combined text contents of each element in the set of matched elements, including their descendants, or set the text contents of the matched elements.
because you're passing the "tr" to text() it gets the text of all the cells (tds) and their content etc and combines them as one, so you need to limit to the first as you've attempted.
however .childNodes[0] can only be applied to a DOM element/node, while $(this).closest("tr") gives you a jquery object/collection, which doesn't have .childNodes property.
So the jquery equivalent would be to use .children().eq(0).
You could use class identifiers to get information you need as well.
<table>
<tr>
<td><span class="first-name">John</span></td>
<td><span class="last-name">Doe</span></td>
<td>
<button class="btn-get-data" data-class="first-name">Get First Name</button>
<button class="btn-get-data" data-class="last-name">Get Last Name</button>
</td>
</tr>
</table>
$(document).ready(function() {
$(".btn-get-data").click(function() {
$btn = $(this);
$tr = $btn.closest('tr');
var first = $tr.find('.' + $btn.attr('data-class')).html();
alert(first);
})
});
If you make the button click generic like so, you can add additional buttons on the page and use that to get the class within that row.
Here is a working fiddle example: https://jsfiddle.net/b1r0nucq/
you could find the :first child and get his html(), as below:
$(document).ready(function() {
$("button").click(function() {
var first = $(this).closest("tr").children(":first").html();
alert(first)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>John</td>
<td>Doe</td>
<td><button>Get First Name</button></td>
</tr>
</table>

Button click only works on one button out of appended list of buttons

JQUERY
i have 4 buttons that are pulled from a database and appended to a list, but only this first appended button works. All the rest wont do anything.
function getaplist(){
$.getJSON('/geticsassignments',
function(data){
console.log(data)
for (var i = 0; i < data.length; i++){
var assign = ("<tr><th><button class='btn btn-warning' id='getaptext'
value=''>"+ data[i].aparatus +"</button></th></tr>")
$('#aptbody').append(assign)
}
$('#getaptext').on('click', function(){
$("#getaptext").removeClass("btn btn-warning").addClass("btn btn-danger")
var aparatus = $(this).text()
alert(aparatus)
$.getJSON('/sendap',{
}, function(data){
console.log(data)
})
})
})
}
getaplist()
<div id='aplist'>
<table class="table">
<thead>
<tr>
<th><p style="text-align: center;">Aparatus</p></th>
</tr>
</thead>
<tbody id='aptbody'>
</tbody>
</table>
</div>
There are two problems with your code.
1- ID must be unique on the DOM.
2- You're trying to add event listeners on dynamically created elements which doesn't work the way you are trying to do.
Solution :
First Make sure the id are unique. And add event listeners with class name for example
$(document).on('click','.btn',function(){
$(this).removeClass("btn btn-warning").addClass("btn btn-danger")
var aparatus = $(this).text()
...
})
This will work for all the elements event which are added dynamically on your page
You're using the same id, getaptext, for every button. The id attribute has to be unique. You'll have to make the ids different, or use something else like a common name or class.

Get back to a reference of a tr

I've got something to the effect of this:
<table>
<tr>
<td></td>
<td></td>
<td>
<table>
<tr>
<td>click me</td>
</tr>
</table>
</td>
</tr>
...
</table>
I have a click event in jquery for my anchor tag with class "fav":
$(".fav").click(function(){
var parentRow = $(this).closest('tr');
});
This gives me a reference to the tr within my 2nd table (the table within the td). I'd like to get a reference back to the tr in my initial table. Pictured highlight shows where I have a reference. Arrow shows where I'd like to get a reference.
There are plenty of other tables on the page.
You can use .parents( selector ) function:
$(".fav").click(function(){
var parentRow = $(this).parents("tr:eq(1)");
// or $(this).parents("tr").eq(1);
// or $($(this).parents("tr")[1]);
// or $($(this).parents("tr").get(1));
});
Well, you are selecting the closest TR, which is the one in the inner table. To get the closest TR in the outer table, you have to find that outer table first:
$(".fav").click(function(){
var parentRow = $(this).closest('table').closest('tr');
});
Just find the <tr> that is a parent. CodePen
$(".fav").click(function(){
var parentRow = $(this).closest('tr').parents('tr')[0];
console.log(parentRow)
});
use this:
var parentRow = $(this).closest('table').closest('tr');

get html table column id with jquery

I have a html Table with 1 row and 1 column like this:
<table id="backlog">
<colgroup> <col width="200"></colgroup>
<tbody>
<tr><td id="91" tabindex="0" class="mark">BackLog</td></tr>
</tbody>
</table>
and I want to get the column id with jquery. How coul i do this?
I have tried this:
colId = $("#backlog td:first").attr('id');
but its not working.
If you're getting an undefined error with the posted code, it's likely that the DOM is not loaded by the time you're running the jQuery function. Make sure you wait for the DOM to load before you execute your jQuery:
$(document).ready() {
colId = $("#backlog td:first").attr('id');
}
Or, alternatively, the jQuery shortcut:
(function($){
colId = $("#backlog td:first").attr('id');
}(jQuery));
Assuming there will only ever be the one row/col
var colId = $("#backlog td").attr("id");
Try
$(function () {
colId = $("#backlog td:first").attr('id');
});

Open link when doubleclicking on table row with jQuery

I have a table that looks like this:
<table id="table">
<thead>
<tr class='tablehead'>
<th>Test</th>
</tr>
</thead>
<tbody>
<tr class='tablecell'>
<td>
</td>
</tr>
</tbody>
</table>
I want to be able to double click on a row and then trigger a link.
An ID has to be transmitted somehow. Where should I define this? This allows me to edit the selected row afterwards.
Any idea how to do this?
Do you have any jQuery you've written yet? Here's a headstart...
Define your ID in the row:
<tr id="something">...</tr>
Then use something like this:
$('tr').dblclick(function(){
var id = $(this).attr('id');
//do something with id
})
This may help you:
jQuery(function($) {
$('#table tr').click(function() {
return false;
}).dblclick(function() {
window.location = url;
return false;
});
});
Do you mean something like this:
$(document).ready(function() {
$('.tablecell').click(function() {
return false;
}).dblclick(function() {
window.open("your_url");
return false;
});
});
and you could create a hidden field and populate that field with the id when double clicked.
Working demo: http://jsfiddle.net/Xr7LC/ (created from the sample code you provided)
Use dblclick api http://api.jquery.com/dblclick/
You can use $(this).attr('id') to get the id, and obviously you will define the id in a tag.
jQuery code for dblclick:
$(document).ready(function() {
$('#table >thead > tr').dblclick(function() {
alert('Row dblclicked');
alert($(this).attr('class'));
});
});​

Categories