Here is what i have so far, getting the row number is working great but i need to make it so that when i click on the link in the table, it doesnt fire the code inside the function.
<table>
<tr class="row">
<td>A</td>
<td><a class="link" href="foo.html">Foo</a></td>
</tr>
<tr class="row">
<td>B</td>
<td><a class="link" href="Bar.html">Bar</a></td>
</tr>
</table>
<script>
$(function(){
$('.row:not(.link)').click(function(){
var $row = $(this).index();
});
});
</script>
The selector .row:not(.link) will select all elements that have a class "row" and don't have the class "link", which is not what you are looking for.
You need to use event.stopPropagation within the click event of the a.link elements so that the click event is not propagated to the parents, which includes row.
Try this:
<table>
<tr class="row">
<td>A</td>
<td><a class="link" href="foo.html">Foo</a></td>
</tr>
<tr class="row">
<td>B</td>
<td><a class="link" href="Bar.html">Bar</a></td>
</tr>
</table>
<script>
$(function(){
$('.row').click(function(){
var $row = $(this).index();
});
$('.row .link').click(function(e){
e.stopPropagation();
});
});
</script>
Just a bit late, but this is first link in Google I opened in search for solution to relative topic. So, it may become useful for someone:
$(".clickableRow").click(function(e) {
if (e.target.nodeName != "A") {
window.document.location = $(this).attr("href");
}
});
Links in a row, I mean standart , will work as usual, and this example markup will have three independent link activations:
<tr class="clickablerow" href="profile.html">
<td>John Doe, the VP</td>
<td>PrintChat</td>
</tr>
Heres a quick fix in jquery, just use instanceof
$("#news-table tr").click(function(e){
if((e.srcElement instanceof HTMLAnchorElement)!=true )console.log("IIIIIIHA HA!");
});
You need to prevent event propagation in the click event of the links - here's a sample: http://jsfiddle.net/6t8u7/1/
As you can see, clicking on the link just fires one event. Clicking on the row fires the other event.
The reason you're getting the current behaviour is that the click event from the link "bubbles up" to the parent element.
With a data attribute, there's no need for a class:
$(document).on('click', '[data-href]', function(e) {
if($(e.target).hasClass('ignore'))
return;
var ignore = ['input', 'a', 'button', 'textarea', 'label'];
var clicked = e.target.nodeName.toLowerCase();
if($.inArray(clicked, ignore) > -1)
return;
window.location = $(this).data('href');
});
Usage example (tr is just an example - you can use div, etc):
<tr data-href="your_url">
<td class="ignore">Go nowhere</td>
<td>Go to your_url</td>
<td>Go to another_url</td>
<td><input type="text" value="Go nowhere"></td>
</tr>
You can also use this without explicitly selecting the row in the second function.
$(function(){
$('.row').click(function(){
var $row = $(this).index();
});
$('.link').click(function(event){
event.preventDefault();
event.stopPropagation();
});
});
Just add: if (e.target.tagName == 'A') return; to row click and Link element will use its own logic.
Here is more detailed example:
$("#table tr").click(function(e) {
// Skip if clicked on <a> element
if (e.target.tagName == 'A') return;
// Logic for tr click ...
});
Also can be usable (especially if you use href with span or other nested items in href):
$(".row").click(function(e) {
var hasHref = $(e.target).closest('td').find('a').length;
if (! hasHref) {
window.document.location = $(this).data("href");
}
});
Related
I'm trying to target a parent from a link with a jQuery function, at first to get its innerHtml but now, just to get its value.
However, I can't manage to track it and I've been putting way too much time on this simple problem.
Here's my html :
<table>
<tr>
<td title="td_title_1" value="td_value_1">Some textElement_1</td>
<td title="td_title_2" value="td_value_2">Some other textElement_2</td>
</tr>
</table>
And my jQuery:
$(function(){
$("*").on('click','a[title="Copy"]',function(){
var clipboard = $(this).parent('td').find('[title="td_title1"]').val();
alert(clipboard);
});
});
I tried parent(), parents(), closest()... I'm still getting "undefined" value. And yeah, the jQuery lib is added.
Also, how would you get the "Some text" part?
Thanks for your time.
value is not a valid property for td or anything else but input. You had to use data-value to be correct.
HTML:
<table>
<tr>
<td title="td_title_1" data-value="td_value_1">Some textElement_1</td>
<td title="td_title_2" data-value="td_value_2">Some other textElement_2</td>
</tr>
</table>
JS:
$(function(){
$(document).on('click','a[title="Copy"]', function(){
var clipboard = $(this).parent().data('value');
alert(clipboard);
});
});
* (star selector) is a tricky selector. Do not use it in every purpose.
The first thing is you need to use stopPropagation() so that it works only for the element you desire and the next thing is you can use the simple way to clone the element so that you get only the text part of <td> element that is the immediate parent of the clicked element.
$(function() {
$("*").on('click', 'a[title="Copy"]', function(e) {
var clipboard = $(this).parent('td')
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text();
alert(clipboard);
e.stopPropagation();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td title="td_title_1" value="td_value_1">Some textElement_1</td>
<td title="td_title_2" value="td_value_2">Some other textElement_2</td>
</tr>
</table>
Simply use $(this).parent().attr('value');
$(function(){
$(document).on('click','a[title="Copy"]',function(e){
var clipboard = $(this).parent().attr('value');
alert(clipboard);
e.stopPropagation();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td title="td_title_1" value="td_value_1">Some textElement_1</td>
<td title="td_title_2" value="td_value_2">Some other textElement_2</td>
</tr>
</table>
$(function(){
$("*").on('click','a[title="Copy"]',function(){
var clipboard = $(this).parent('td').filter('[title="td_title1"]').attr('value');
alert(clipboard);
});
});
You should try with filter. Find function is for finding children, your intent is to filter the tds based on the criteria, and also change the val to .attr('value'), since .val is only for inputs only, but to read any attribute use attr
try
alert($(this).parent('td').attr('value'));
How do I disable click on all grid cells except one cell in a row? I am trying to disable clicks on any cell in the grid, when a cell enters the edit mode. So I tried:
$('#QCStatus tr td').bind('click',function() {
return false;
});
//QCStatus is the id of the grid
To enable click on a cell, in the same row that is being edited, I tried:
$('#QCStatus tr.selected-row td[aria-describedby="QCStatus_ActionIcons"]').bind('click',function() {
return true;
});
But this doesn't have any effect as click is disabled by the first snippet. What is the correct way to achieve this?
You can exclude the selected row it with :not() here:
$('#QCStatus tr:not(.selected) td').on('click', function(e) {
$('pre').prepend('event :::: '+e.type+'\n');
return false;
});
.selected{background:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id='QCStatus'>
<tr><td>click</td></tr>
<tr class='selected'><td>click</td></tr>
<tr><td>click</td></tr>
<tr><td>click</td></tr>
</table>
<pre></pre>
This will bind the click on all the tds which are not the children of tr.selected.
As per your comment you can add more:
How could I just exclude the td in the selected row td[aria-describedby="QCStatus_ActionIcons"]?
$('#QCStatus tr:not(.selected) td:not([aria-describedby="QCStatus_ActionIcons"])').on('click', function(e) {
$('pre').prepend('event :::: '+e.type+'\n');
return false;
});
Use event.stoppropagation() for element to be eliminated for click event. It prevents further propagation of the current event.
$('tr').on('click', function() {
console.log('clicked!');
});
$('.disabled').on('click', function(e) {
e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table border="1">
<tr>
<td>Hello</td>
<td class="disabled">Disabled</td>
</tr>
<tr>
<td>Hello</td>
<td class="disabled">Disabled</td>
</tr>
<tr>
<td>Hello</td>
<td class="disabled">Disabled</td>
</tr>
</table>
Fiddle here
add a "disabled" attribute to those buttons where you want to disable the click.
for a div disabled attribute doesn't work.
in those cases use "pointer-events:none;" in your css of that particular divs.
I'm trying to change a yes to a select dropdown that allow user to select yes or no.
the html is like that:
<tr>
<td> text </td>
<td>no(must be changed by js)</td>
<td>My button</td>
</tr>
<tr>
<td> text </td>
<td>yes(must be changed by js)</td>
<td>My button</td>
</tr>
...
$('a[href="#"]').click(function() {...} });
I want to change the content of the "yes" just before the button to a dropdown list AND the value of the href of the button clicked to do some treatment in back.
I tried this but it doesn't work after the alert... :
<script type="text/javascript">
//to make the authority editable
$('a[href="#"]').click(function() {
var select = this.parentElement.parentElement;
alert(select);
select: nth - child(2).apped("hello");
});
</script>
Thanks to help me :-)
You can use .parent() and .prev() traversal methods
$('a[href="#"]').click(function() {
$(this).parent().prev().html('xxx')
});
Demo: Fiddle
If you want to use :nth-child, you need to find the tr of the clicked button then use .find()
jQuery(function () {
$('a[href="#"]').click(function () {
$(this).closest('tr').find(':nth-child(2)').html('xxx')
});
})
Demo: Fiddle
If you only have two tr in your table like above HTML markup, You can use .eq() like this:
$('a[href="#"]').click(function() {
var select = this.parentElement.parentElement;
alert(select);
$('tr:eq(1) td:eq(1)').append("hello");
});
Also, you're probably looking for .text() instead of .append() to change the text inside your td:
$('tr:eq(1) td:eq(1)').text("hello");
I have a table like this
<tr class="odd">
<td class=" sorting_1">opps</td>
<td class="center "> <a href="#" onclick="tst(this)" class="btn btn-warning">
<i class="icon-edit icon-white">
</i> Edit</a>
</td>
</tr>
On click of that hyperlink i need the td values of the row.
This javascript i tried
$(document).ready(function () {
$("#tblTest td:nth-child(2)").click(function (event) {
//Prevent the hyperlink to perform default behavior
event.preventDefault();
var $td = $(this).closest('tr').children('td');
var sr = $td.eq(0).text();
alert(sr);
});
});
This one works if i put in Table click event.
I need on click of that hyperlink it should happen.
How to achieve this ?
Thanks in Advance.
without iterating row by row if any method is there to get it ?
You are binding click event to td bind it to a
Change
$("#tblTest td:nth-child(2)").click(function (event) {
To
$("#tblTest td:nth-child(2) a").click(function (event) {
Try this:
$("a.btn").click(function (event) {
//Prevent the hyperlink to perform default behavior
event.preventDefault();
var $td = $(this).parent().closest('tr').children('td');
var sr = $td.eq(0).text();
alert(sr);
});
DEMO HERE
I have the following code:
$("#Table1 tbody").children().each(function(e){
$(this).bind('click',
function(){
// Do something here
},
false)
});
The Table1 html table has 2 columns; one for Names and one for a <button> element.
When I click on a table row, it works fine. When I click on the button, the button code fires; however, so does the row code.
How can I filter the selector so the button doesn't trigger the parent element's click event?
This is what you want.
It's stopPropogation that will stop the parents.
<table>
<tr>
<td>The TD: <input type="button" id="anotherThing" value="dothis"></td>
</tr>
</table>
<div id="results">
Results:
</div>
<script>
$(function() {
$('#anotherThing').click(function(event) {
$('#results').append('button clicked<br>');
event.stopPropagation();
});
$('td').click(function() {
$('#results').append('td clicked<br>');
});
});
</script>
Here's a link to an example of it working as well:
http://jsbin.com/uyuwi
You can tinker with it at: http://jsbin.com/uyuwi/edit
You could also do something like this:
$('#Table1 tr').bind('click', function(ev) {
return rowClick($(this), ev);
}); //Bind the tr click
$('#Table1 input').bind('click', function(ev) {
return buttonClick($(this), ev);
}) //Bind the button clicks
function rowClick(item, ev) {
alert(item.attr('id'));
return true;
}
function buttonClick(item, ev) {
alert(item.attr('id'));
ev.stopPropagation();
return true;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="Table1">
<tbody>
<tr id="tr1">
<td>
The TD: <input type="button" id="button1" value="dothis" />
</td>
</tr>
<tr id="tr2">
<td>
The TD: <input type="button" id="Button2" value="dothis" />
</td>
</tr>
</tbody>
</table>
Is it possible to remove the button code and just run the row code, therefore kind of using event bubbling.
Another couple options:
can you add a class to the TD that has the button in it and in the selector, do '[class!="className"]'
maybe try event.preventDefault(). You can see it being used here. this way you can prevent the default action that is triggered when the button is clicked, although I'm not sure if it will completely prevent the bubbling.