$('td').click(function() {
myId = $(this).parent().attr("id");
myItem = $(this).text();
alert('u clicked ' + myId);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr>
<td>Computer</td>
</tr>
<tr>
<td>maths</td>
</tr>
<tr>
<td>physics</td></div>
</tr>
</table>
When I click on table item I want to get alert 'u clicked science' but I get undefined.
Any help would be appreciated!
There are no id attributes in your markup. All you are dealing with is innerText
$('td').click(function() {
var myItem = $(this).text();
alert('u clicked ' + myItem);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr>
<td>Computer</td>
</tr>
<tr>
<td>maths</td>
</tr>
<tr>
<td>physics</td>
</tr>
</table>
You have invalid markup. extra closing div is added after last tr closing markup. you need to remove it.
what you need to alert is text of element and not parent id. use .text() along with clicked td elements jquery context:
$('td').click(function(){
myItem=$(this).text();
alert('u clicked ' +myItem);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr><td>Computer</td></tr>
<tr><td>maths</td></tr>
<tr><td>physics</td></tr>
</table>
try this:
$('td').click(function () {
alert('u clicked ' + $(this).text());
});
As I have already commented, you are missing ID in tr. I have added few more tds for demo.
$('td').click(function() {
var myId = $(this).parent().attr("id");
var myItem = $(this).text();
alert('u clicked ' + myId);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table>
<tr id="IT">
<td>Computer</td>
</tr>
<tr id="General">
<td>maths</td>
<td>History</td>
</tr>
<tr id="Science">
<td>physics</td>
<td>Chemistry</td>
<td>Biology</td>
</tr>
</table>
Related
I saw other questions and answers and doesn't meet my need.
<thead>
<tr>
<td>a2</td>
<td>a2</td>
</tr>
<tbody>
<tr>
<td>a2</td>
<td>a2</td>
</tr>
<tr>
<td>4d</td>
<td>a23</td>
</tr>
</tbody>
<script>
$('tr').on("click", function(){
var id = $(this).find('tbody tr td').eq(2).text(); //here
alert(id);
});
</script>
I want to get tbody td not thead td, and i tried above code on script.
But alert does occur with no value.(empty alert)
Hm... did I type something wrong?
Below script will get the value of the first td of the tbody tr
<table>
<thead>
<tr>
<td>a2</td>
<td>a2</td>
</tr>
</thead>
<tbody>
<tr>
<td>a2</td>
<td>a2</td>
</tr>
<tr>
<td>4d</td>
<td>a23</td>
</tr>
</tbody>
</table>
<script>
$('tbody tr').on("click", function(){
var id = $(this).find('td:first-child').text(); //here
alert(id);
});
</script>
If you want to get the value of each td clicked you can use:
$('tbody td').on("click", function(){
var id = $(this).text(); //here
alert(id);
});
this inside a jQuery handler will refer to the element that triggered the event - you're using $('tr').on, so this will refer to a tr. But trs don't have tbody children, so $(this).find('tbody ... doesn't work. Instead, since you're starting from the tr, just .find tds. Also note that since you only have two tds in each tr, .eq(2) will always be empty (array-like collections are zero-indexed in Javascript) - if you want the second td's text, you should use .eq(1) instead.
$('tr').on("click", function() {
var id = $(this).find('td').eq(1).text();
console.log(id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td>a2</td>
<td>a2</td>
</tr>
<tbody>
<tr>
<td>a2</td>
<td>a2</td>
</tr>
<tr>
<td>4d</td>
<td>a23</td>
</tr>
</tbody>
</table>
The problem with your script is that :
<script>
$('tr').on("click", function(){
var id = $(this).find('tbody tr td').eq(2).text(); //here
alert(id);
});
</script>
1) You are referring to column 2, which does not exist.
2) Moreover, writing "find('tbody tr td')" will search for another tbody tr and td tags within the "$('tr').on("click", function()" that you are searching for, which doesn't exist either, hence alert returns blank. So try this script and let me know if it works!
<script>
$('tbody tr').on("click", function(){
var id = $(this).find('td').eq(0).text();
alert(id);
});
</script>
I'm trying to select all TD tags on the page that has a class of hours and read each data attribute (short name of month) and then add that value after the current content within the <td> and </td>. Like <td>40 Dec </td>.
Since I don't get any value, something is wrong with my script, but what have I missed or done wrong?
My jQuery:
$("tbody").find("td").each(function () {
if ($(this).hasClass("hours")) {
var d = $(this).data("date");
$(this).append("<br>" + d);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tbody>
<td data-date="dec" data-activityid="7" data-resourceid="1" data-projectid="2" class="workingHours-ok hours">40</td>
</tbody>
Just use append(function), which iterate over the elements and appends the returned html code. So inside the helper function get the data attribute value and return it.
$('td.hours').append(function() {
return '<br>' + $(this).data('date');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td data-date="Dec" class="hours">40</td>
<td data-date="Jan" class="hours">50</td>
</tr>
<tr>
<td data-date="Feb" class="hours">60</td>
<td data-date="Mar" class="hours">70</td>
</tr>
<tr>
<td data-date="Jan" class="hours">60</td>
<td data-date="Mar" class="hours">70</td>
</tr>
</table>
You don't need to use each(). You can do it like following.
$('td.hours').text(function (index, text) {
return text + ' ' + this.dataset.date;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td data-date="Dec" class="hours">40</td>
<td data-date="Jan" class="hours">50</td>
</tr>
<tr>
<td data-date="Feb" class="hours">60</td>
<td data-date="Mar" class="hours">70</td>
</tr>
</table>
Because of your $(this).data("date").This is not working.You should use $(this).data('date')
Of course your selector should be like
$("#yourtableid > tbody td.hours").each(function(){
var d= $(this).data('date');//and so on//})
Assuming you have tbody in your markup, try this
$("tbody td.hours").each(function () {
$(this).append("<br>" + $(this).data("date") );
});
or simply
$("td.hours").each(function () {
$(this).append("<br>" + $(this).data("date") );
});
or using simply attr if data-date is set dynamically
$("td.hours").each(function () {
$(this).append("<br>" + $(this).attr("data-date") );
});
it is your code , as it is just add <table> before <tbody> because , in your code , a <tobody> is not a parent to <td> unless being a child of <table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tbody>
<td data-date="dec" data-activityid="7" data-resourceid="1" data-projectid="2" class="workingHours-ok hours">40</td>
</tbody></table>
<script>
$("tbody").find("td").each(function () {
if ($(this).hasClass("hours")) {
var d = $(this).data("date");
$(this).append("<br>" + d);
}
});</script>
It's brain dead me here again.
Issue:
trying to get the value of a hidden td in the same row as a selected button. The code i have finds both the values of both hidden tds, i just want the value of the hidden td of the same row as the pressed button.
Thanks in advance
HTML
<tr>
<td class="rowid" hidden>1</td>
<td >data</td>
<td ><button>process</button></td>
</tr>
<tr>
<td class="rowid" hidden>2</td>
<td >data</td>
<td ><button>process</button></td>
</tr>
jQuery
$j("Button").on("click",function(){
var strRwId = $j( "td.strRowId" ).text();
$j("td.strRowId").css( "background-color", "red" );
alert("you pressed the edit button for Row: " + strRwId + "!");
});
this could give you an idea
$("button").click(function() {
var $button = $(this);
var $tr = $button.parent("tr");
var $hidden = $tr.find("td[hidden]");
alert("you pressed the edit button for Row: " + $hidden.html() + "!");
})
I think you are looking for something like this.
$("button").on("click", function () {
var tr = $(this).closest('tr');
var strRwId = tr.find('.rowid').text();
tr.css("background-color", "red");
alert("you pressed the edit button for Row: " + strRwId + "!");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="rowid" hidden>1</td>
<td>data</td>
<td><button>process</button></td>
</tr>
<tr>
<td class="rowid" hidden>2</td>
<td>data</td>
<td><button>process</button></td>
</tr>
</table>
I have problems getting id from tr and td in my table.
Let's say I have a table like this:
<table class="table table-hover" id="table_tingkat_jual">
<thead>
<tr>
<th>Tingkat Penjualan</th>
<th>SA</th>
<th>Kode SA</th>
<th>Kuantiti Terendah (lusin)</th>
<th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
<tr id='0'>
<td>Diatas Rata-Rata</td>
<td id='1'>1 </td>
<td>AG</td>
<td>3870</td>
<td>5782</td>
</tr>
<tr id='0'>
<td>Diatas Rata-Rata</td>
<td id='3'>3 </td>
<td>CA</td>
<td>1080</td>
<td>3780</td>
</tr>
</tbody>
</table>
I want to getting id from TR and id FROM td for each tr clicked in specific table (table_tingkat_jual).
This is my syntax in jQuery:
$('#table_tingkat_jual tr').click(function(){
this.stopPropagation();
});
$('#table_tingkat_jual tr').click(function() {
var trid = $(this).closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $(this).closest('td').attr('id');
alert("TD ID " + tdid);
});
But when I clicked the row in that table, nothing happened. What I want is alert me the id. (See the alert function).
What's wrong?
Update from chat:
It turns out the problem is that the table is loaded dynamically via ajax, so a delegated event is needed (in addition to the other fixes):
$(document).on('click', '#table_tingkat_jual tr', function (e) {
e.stopPropagation();
var $this = $(this);
var trid = $this.closest('tr').data('id');
alert("TR ID " + trid);
var tdid = $this.find('td[data-id]').data('id');
alert("TD ID " + tdid);
});
Previous details:
There are several issues, not the least of which is the use of duplicate ID's in the HTML (which is invalid).
You also do not need separate, identical, selectors to handle stopPropogation (assuming you actually need stopPropogation at all (e.g. to avoid clicks in parent objects).
It appears you also want to drill down for the TD values, so try this:
JSFiddle: http://jsfiddle.net/TrueBlueAussie/fw5ty/
$('#table_tingkat_jual tr').click(function(e) {
e.stopPropagation();
var $this = $(this);
var trid = $this.closest('tr').data('id');
alert("TR ID " + trid);
var tdid = $this.find('td[data-id]').data('id');
alert("TD ID " + tdid);
});
data('id') is a short-cut for attr('data-id').
note I have changed your HTML to use data-id attributes instead of id= so that duplicate values are allowable.
<table class="table table-hover" id="table_tingkat_jual">
<thead>
<tr>
<th>Tingkat Penjualan</th>
<th>SA</th>
<th>Kode SA</th>
<th>Kuantiti Terendah (lusin)</th>
<th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
<tr data-id='0'>
<td>Diatas Rata-Rata</td>
<td data-id='1'>1</td>
<td>AG</td>
<td>3870</td>
<td>5782</td>
</tr>
<tr data-id='0'>
<td>Diatas Rata-Rata</td>
<td data-id='3'>3</td>
<td>CA</td>
<td>1080</td>
<td>3780</td>
</tr>
</tbody>
</table>
If you really must use duplicate ID's (which I strongly recommend you fix) use this code instead:
http://jsfiddle.net/TrueBlueAussie/fw5ty/1/
$('#table_tingkat_jual tr').click(function(e) {
e.stopPropagation();
var $this = $(this);
var trid = $this.closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $this.find('td[id]').attr('id');
alert("TD ID " + tdid);
});
you have two elements with the same id:
<tr id='0'>
id should be unique. Use a class if you want both to be 0, or assign one a different value.
The issue is that .closest starts looking from the target element and up, not down on the DOM tree, and since your event is on tr it never gets to the td, that's why you always get undefined, if what you want is to get the id of the first td with one, try using .find():
$('#table_tingkat_jual tr').click(function() {
var trid = $(this).closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $(this).find('td[id]').attr('id');
alert("TD ID " + tdid);
});
Sample fiddle
Also I'd get rid of:
$('#table_tingkat_jual tr').click(function(){
this.stopPropagation();
});
And finally, you're not supposed to have repeated id attributes on html, so you should change those or use a data attribute or a class instead.
Maybe you forgot to include jquery?
I just included jQuery from google and let the script wait until the document is completly loaded.
I also gave the different ids, but that was not the problem i think.
I also recommend giving all the an ID, because now he alerts undefined ID.
For me it works like this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#table_tingkat_jual tr').click(function() {
var trid = $(this).closest('tr').attr('id');
alert("TR ID " + trid);
var tdid = $(this).closest('td').attr('id');
alert("TD ID " + tdid);
});
});
</script>
</head>
<body>
<table class="table table-hover" id="table_tingkat_jual">
<thead>
<tr id='0'>
<th>Tingkat Penjualan</th>
<th>SA</th>
<th>Kode SA</th>
<th>Kuantiti Terendah (lusin)</th>
<th>Kuantiti Tertinggi (lusin)</th>
</tr>
</thead>
<tbody>
<tr id='1'>
<td>Diatas Rata-Rata</td>
<td id='1'>1 </td>
<td>AG</td>
<td>3870</td>
<td>5782</td>
</tr>
<tr id='2'>
<td>Diatas Rata-Rata</td>
<td id='3'>3 </td>
<td>CA</td>
<td>1080</td>
<td>3780</td>
</tr>
</tbody>
</table>
<body>
</html>
Hope it helps.
hello guys? can you please help with this? i have this tables in HTML.what i want to achieve is that, when i click the row the checkbox will be checked and the row will be highlighted.and is it possible with the checkbox column hidden?
<table border="1" id="estTable">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>Chris</td>
<td>10</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Cass</td>
<td>15</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>Aldrin</td>
<td>16</td>
</tr>
</tbody>
</table>
<input type="button" value="Edit" id="editbtn"/>
<div id="out"></div>
and i have this javascript to get the values of the selected row.And i was hoping to print one row at a time.
$('#editbtn').click(function(){
$('#estTable tr').filter(':has(:checkbox:checked)').find('td').each(function() {
$('#out').append("<p>"+$(this).text()+"</p>");
});
});
This gets a little easier when you use classes to add more context to your source:
<tr>
<td class="select hidden">
<input type="checkbox">
</td>
<td class="name">Chris</td>
<td class="age">10</td>
</tr>
Then you can do something like this:
$(document).ready(function () {
'use strict';
$('#estTable tbody tr').click(function (e) {
//when the row is clicked...
var self = $(this), //cache this
checkbox = self.find('.select > input[type=checkbox]'), //get the checkbox
isChecked = checkbox.prop('checked'); //and the current state
if (!isChecked) {
//about to be checked so clear all other selections
$('#estTable .select > input[type=checkbox]').prop('checked', false).parents('tr').removeClass('selected');
}
checkbox.prop('checked', !isChecked).parents('tr').addClass('selected'); //toggle current state
});
$('#editbtn').click(function (e) {
var selectedRow = $('#estTable .select :checked'),
tr = selectedRow.parents('tr'), //get the parent row
name = tr.find('.name').text(), //get the name
age = parseInt(tr.find('.age').text(), 10), //get the age and convert to int
p = $('<p />'); //create a p element
$('#out').append(p.clone().text(name + ': ' + age));
});
});
Live demo: http://jsfiddle.net/Lf9rf/
if i understand the "print one row at a time" correctly, i think you need to empty your "out" selector before executing the new call
$('#editbtn').click(function(){
$('#out').empty();
$('#estTable tr').filter(':has(:checkbox:checked)').find('td').each(function() {
$('#out').append("<p>"+$(this).text()+"</p>");
});
});
jsBin demo
CSS:
.highlight{
background:gold;
}
jQuery:
$('#estTable tr:gt(0)').click(function( e ){
var isChecked = $(this).find(':checkbox').is(':checked');
if(e.target.tagName !== 'INPUT'){
$(this).find(':checkbox').prop('checked', !isChecked);
}
$(this).toggleClass('highlight');
});