For example:
$("table tr").click( function(event)
{
//Say, here i want get the data of td element where its class name="special"
});
Is there any way I can select a element while in the click event, a element under the attached element above $("table tr")?
In this specific case, you can do this:
$("table tr").click( function(event)
{
$(this).children('td.special').whatEverYouNeed();
});
Generally speaking, you need to use find():
$("table tr").click( function(event)
{
$(this).find('td.special').whatEverYouNeed();
});
Something like
$(this).find(".special").html();
I think that that works
Related
$("#question-proper table tr td input[value='Save']").on('click',function(){
var number = parseInt($(this).attr('data'));
$(this).attr("value","Add");
alert("Clicked");
});
When i click again the input button with the value of Add. It alerts again as not expected. It should not because the value now of input button is "Add" not the "Save".
$(document).on("click", "input[value='Save']", function(){
$(this).attr("value", "Add");
alert("clicked");
});
adapt this to fit your needs
Fiddle here: http://jsfiddle.net/omofa2v9/
Read about event delegation here
The event is bound to the element and is kept even if it no longer match the query. In fact, the event don't even know what the query was, only the actual elements it was added to.
Possible solutions:
Delegate to a parent element:
$("#question-proper table tr td").on('click', "input[value='Save']", function(){
var number = parseInt($(this).attr('data'));
$(this).attr("value","Add");
alert("Clicked");
});
Check in the event:
$("#question-proper table tr td input[value='Save']").on('click',function(){
if($this).attr('value') !== 'Save') return;
var number = parseInt($(this).attr('data'));
$(this).attr("value","Add");
alert("Clicked");
});
Run the event only once by using .one:
$("#question-proper table tr td input[value='Save']").one('click',function(){
var number = parseInt($(this).attr('data'));
$(this).attr("value","Add");
alert("Clicked");
});
In my previous post I want it to find specific dom elements. The jquery selector using find provided in the solution was great. But I want to delegate this selector to bind it with "contextmenu" event. But it won't work if you pass jquery object in the delegate. What I do is the following.
var slots;
slots = $(".fc-slats > table tbody tr ").find("td:eq(1)");
$(".fc-agenda-view").on("contextmenu", slots, function (e){
e.preventDefault();
if (paste===true) {
showSlotContextualMenu($(this), e);
}else{
console.log($(this));
}
});
I want $this object to be the slot but I read that I cannot use jquery object in "on" but I need to use a selector. What would be the equivalent selector for this?I want the td that is second child from the desired tr. Is it
.fc-slats > table tbody tr td:eq(1)
The second parameter of on should be a string selector to find the descendant elements of the primary selector. With that in mind, this should work:
$(".fc-agenda-view").on("contextmenu", '.fc-slats > table tbody tr td:eq(1)', function(e) {
// your code...
});
Does this work?
$(document).on("contextmenu", ".fc-slats > table tbody tr > td:first-child", function (e){
// .....
});
What worked was the following.
var selector = ".fc-slats > table tbody tr td:nth-child(2)";
$(".fc-agenda-view").on("contextmenu",selector , function (e){
e.preventDefault();
if (paste===true) {
showSlotContextualMenu($(this), e);
}else{
console.log($(this));
}
});
I want to get the id of the parrent tr of the td:
In this Jsfiddle I'm getting the id the td which has been chacked; I just return this value only if one row has been checked!
but
$(this).parent().attr("id")
gives me an undefined error! What is the correct way to get the id of parrent?
Thanks
When you use $(this).parent().attr("id") what you actualy get is TBODY element, try using closest('table') or parents('table') instead to find the parent TABLE of your TR.
From your example:
$("#my_tbl").find("tr").each(function() {
if ($(this).find("td:first").hasClass('checked'))
{
count = count + 1;
id = ($(this).closest('table').attr('id'));
// id = ($(this).parents('table').attr('id'));
}
});
Fiddle Demo
You can use:
id = $(this).attr("id");
It's because you're looping through the tr of your table using $("#my_tbl").find("tr").each( so you're already at the tr level.
So there's no need to use parent() to traverse up to the parent anymore, you just need to use $(this) to target current row tr of checked td instead.
Fiddle Demo
try with
just this works check demo
$(this).attr("id");
$(this) here is referring to tr only
Fiddle Demo
You just need to set this:
id = $(this).attr("id");
This is because you are working with currently with that tr.
First, you need to check if parent tag/node has id attribute or not. Also, you would get a better answer if you could share what's your objective and relevant HTML
use toggleClass() to switch the class
use .map() to get the ids of checked tr elemets
Try
function myFunction(element) {
$(element).find("td:first").toggleClass('checked');
}
function check() {
var ids = $("#my_tbl tr td.checked").parent().map(function () {
return this.id;
}).get();
if (ids.length > 0) {
alert(ids.join());
}
}
Demo: Fiddle
A more jQueryish solution will be is to use jQuery event handlers like
jQuery(function ($) {
$('#my_tbl tr').click(function () {
$(this).find("td:first").toggleClass('checked');
})
$('#check').click(function () {
var ids = $("#my_tbl tr td.checked").parent().map(function () {
return this.id;
}).get();
if (ids.length > 0) {
alert(ids.join());
}
})
})
Demo: Fiddle
If you want to support IE7+ only then try this
i read docs
http://docs.jquery.com/Plugins/Treeview/treeview#options
also googled, but nothing found easy and good solution, how to highlighting the selected item. i use span so not redirect but nothing selected
This code will work for highlighting the file in a treeview:
$(document).ready(function(){
$("#index").treeview();
$('#index span.file').bind('click', function() {
//clear all clicked items if any
$('.selected').removeClass('selected');
//set this clicked
$(this).addClass('selected');
});
});
In jquery.treeview.css:
.treeview span.file.selected { background-color: #F0FFF0; }
You can select li items in the tree and add event listeners to them, like this:
$('#browser li.file').bind('click', function() {
//clear all clicked items if any
$('.clicked').removeClass('clicked');
//set this clicked
$(this).addClass('clicked');
})
Inside handler function 'this' word points to the clicked item.
Or if by 'selecting' you mean something else, you can also listen desired event type like in example.
$('#browser li.file').bind('mouseover', function() {
... your code ...
})
In the tree view, add an id tag to the added branches.
"<li><span id="myNode1" class='file'>Item2</span></li>"
Then you can use jQuery highlight to highlight the selected node.
$("#myNode1").click(function () {
$(this).effect("highlight", {}, 3000);
});
Or permanently change the style
$('#myNode1').css('styleFloat');
It may be out of date but I got past it by adding the following under jqueryFileTree.js's FileTree function (version 2.14)
function FileTree(el, args, callback) {
...
$el.delegate("li a", this.options.folderEvent, _this.onEvent);
$el.delegate("li a", "click", function(event){
$("#" + $el[0].id + " li a.selected").removeClass("selected");
$(this).addClass("selected");
});
}
I have the following HTML in a JSP file:
<div class="custList">
<table class="dataGrid">
<c:forEach var="cust" items="${custList}">
<tr>
<td>${cust.number}</td>
<td>${cust.description}</td>
<td>${cust.type}</td>
<td>${cust.status}</td>
</tr>
</c:forEach>
</table>
</div>
I need to be able to trigger a 'click' event on each of the dynamically created <tr> tags and also be able to access the values of the <td> tags (of the clicked <tr>) from within the JavaScript function. I have this function already, but sadly it doesn't seem to be working.
$(document).ready(function() {
$("div.custList > table > tr").live('click', function() {
alert("You clicked my <tr>!");
//get <td> element values here!!??
});
});
Update (Jan 2016): jQuery.live is deprecated (as noted here:http://api.jquery.com/live/)
As of jQuery 1.7, the .live() method is deprecated. Use .on() to
attach event handlers.
Unless otherwise definied (<tfoot>, <thead>), browsers put <tr> implicitly in a <tbody>.
You need to put a > tbody in between > table and > tr:
$("div.custList > table > tbody > tr")
Alternatively, you can also be less strict in selecting the rows (the > denotes the immediate child):
$("div.custList table tr")
That said, you can get the immediate <td> children there by $(this).children('td').
Try jQuery's delegate() function, like so:
$(document).ready(function(){
$("div.custList table").delegate('tr', 'click', function() {
alert("You clicked my <tr>!");
//get <td> element values here!!??
});
});
A delegate works in the same way as live() except that live() cannot be applied to chained items, whereas delegate() allows you to specify an element within an element to act on.
This work for me!
$(document).ready(function() {
$(document).on("click", "#tableId tbody tr", function() {
//some think
});
});
Since TR elements wrap the TD elements, what you're actually clicking is the TD (it then bubbles up to the TR) so you can simplify your selector. Getting the values is easier this way too, the clicked TD is this, the TR that wraps it is this.parent
Change your javascript code to the following:
$(document).ready(function() {
$(".dataGrid td").click(function() {
alert("You clicked my <td>!" + $(this).html() +
"My TR is:" + $(this).parent("tr").html());
//get <td> element values here!!??
});
});
$("body").on("click", "#tableid tr", function () {
debugger
alert($(this).text());
});
$("body").on("click", "#tableid td", function () {
debugger
alert($(this).text());
});
$(this).find('td') will give you an array of td's in the tr.
<script>
jQuery(document).ready(function() {
jQuery("tr").click(function(){
alert("Click! "+ jQuery(this).find('td').html());
});
});
</script>