Can someone help me how to disable the click event on first column and the other columns should be clickable. I have tried several different ways like slice
td.slice() after tr element and also td:gt(0)
etc and was unsuccessful. I had been banging my head since 2 days and I didn't find any relevant solutions out on google.
$('#Table tbody tr').on("click",function(){
var aPos Table.fnGetPosition(this);
var aData = Table.fnGetData( aPos[6] );
//aData = $(this).parent().parent().html();
xyz = $(this).parent().parent().find("td").eq(1).html();
yzx= $(this).parent().parent().find("td").eq(7).html();
zxy= $(this).parent().parent().find("td").eq(2).html();
alert(aPos);
});
Try stopPropogation on first column click DEMO
Edit: Added demo and fixed .find('td:first')
$('#Table tr').find('td:first').on('click', function (e) {
e.preventDefault();
e.stopPropagation();
});
add some kind of unique identifier on the first column and
$('identifier').click(function(){
return false;
});
I think you can also target first column with the n-th child thing but I am not sure of the exact syntax. Maybe something like
$('table tr td:(nth-child(1)').on('click', function(){
return false;
});
or something like the above, hope it helps
You need to add some kind of identifier to the columns you want to use:
<tr>
<td class="dontClickMe"></td>
<td class="clickMe"></td>
</tr>
Then it's as simple as:
$('.clickMe').on('click', function() { ... });
Related
I want to select the class of the td that is clicked inside my table and then pass it to a function.
<table>
<tr>
<td class = "Vespalx">Vespa lx</td>
</tr>
</table
So in jQuery I tried to select it whit:
$type = $(this).closest("table").find("div");
then I want to perform an action on $type:
$type.click(function(){
$("body").hide();
}):
But now nothing happens!
Did I make a fault with selecting the div?
Is this helping ?
$('td').click(function(){
$(this).attr('class');
// or
$this.classList;
});
You are searching for a div. There isn't any div in your sample code.
I adapted your piece of javascript to find the td.
$type = $(this).closest("table").find("td");
alternatively you could use the css class selector (Vespalx) also.
You need to clarify what is $(this) in your code. However this is a solution:
$type = $("body").find("table").find("td");
$type.click(function(){
$("body").hide();
});
I replaced $(this) with $("body") and I used find method to get the table instead of closest that doesn't work for me. Then I fix the error of second find. In your second find you search for a div and not for a td. At the end of your code I see : and this is wrong. You must use ; and not :
Tnx for all the answers!!!
Know I see that my question was a vague.
But what I wanted was select the class of the td that is clicked and then do something with this class.
See my code:
function scooter (klas) {
var clas = $(klas);
clas.addClass("allscootervis");
//$(".allscooter").css("display", "block");
//$scooter = $("div > this", ".ScooterContent");
$(".introduction").replaceWith("");
}
$("td").click(function(){
$typeun = $(this).attr('class');
//$type = '$(".' + $typeun + '")';
$type = '.' + $typeun;
scooter($type);
});
The use of "this" and ".parent()" in jquery gets a bit confusing when it goes past simple divs or datatables. I have a table with the following structure: (I can't rename any of the classes or id)
<table class="table1">
<tbody>
<tr>
<div class="detail">
<table>
<thead></thead>
<tbody>
<tr>
<td>
<img class="picture_open" src="../location">
</td></tr></tbody></table></div></tr></tbody></table>
What I'm trying to do is have a click function on that img which will be able to grab the full RowElement.
What I have now:
$(".table1 tbody tr td img.picture_open").live('click', function () {
var overallTable = jQuery(this).parent("table").dataTable();
console.log("overallTable: " + overallTable);
var elementRow = this.parentNode.parentNode;
console.log("elementRow: " + elementRow);
var rowData = overallTable.fnGetData( elementRow );
console.log("rowData: " + rowData);
if ( this.src.match('img_name') )
{
//kills the table that was created if that row is opened
}
else
{
//runs ajax call to create another table since row is NOT opened
}
} );
However the code I have above prints out this:
overallTable: [object Object]
elementRow: [object HTMLTableRowElement]
TypeError: 'null' is not an object (evaluating 'oSettings.aoData')
In my problem is the $(this) incorrect? (Not getting the img with class "picture_open")
Or is my overallTable variable set up incorrectly with the .parent()?
Or is it my elementRow variable set up improperly with the parentNode?
Any help to clarify my errors would be amazing.
Thanks!
parent() in jQuery will parse only one level up the DOM, you should use .parents()/.closest(). This will fix your issue.
NOTE: .live() is turned into .on() in latest jQuery versions. Better to use .on()/.click()
parent() in jQuery only moves one level up the DOM, so what you probably want there is parents('table'). This should fix your overallTable issue.
in jQuery, .parent() only goes up the DOM once. What you should be using it .parents() to look up the DOM until it finds table
You need to use .closest('table') to find the closest table
Similary to find the element row
var elementRow = $(this).closest('tr');
Try this :
$('.table1').on('click', '.picture_open', function(ev) {
this // is .picture_open element
ev.target // is .picture_open element
ev.delegateTarget // is .table1 element
var $row = $(ev.delegateTarget).find('.detail tr').first();
});
Thus far I've figured out most of the code I need to select a radio button inside of a <tr> when the row is clicked & to change the color of the <tr> when it's clicked, but I need to be able to change the color back & change the color of a new <tr> if the user selects a different one. Right now it just keeps changing the color of the rows, but doesn't change them back. Code is below:
<script>
var prevTr;
$('tr').click(
function() {
$('input[type=radio]',this).attr('checked','checked');
$(this).addClass('selectedtr');//css('background-color', 'Green');
prevTr = $(this).id;
$("#"+prevTr).removeClass('selectedtr');
}
);
...
Remove the selectedtr class from all tr elements first, then add it to the current one:
$('tr').click(
function() {
$('input[type=radio]',this).prop('checked','checked');
$(this).siblings().removeClass('selectedtr');
$(this).addClass('selectedtr');
}
);
Edit - I don't think David Thomas's answer is quite what you're looking for, but I do think the siblings() select would be more efficient than selecting all tr elements.
Another Edit
In reference to your comment: prop should be used instead of attr. Here's a fiddle:
http://jsfiddle.net/xQyAV/
I would use css:
binput[type=radio]:hover {
//here edits
//the setting back happens automaticly
}
I'd suggest:
$('input[type=radio]').change(function (){
var self = this,
row = $(self).closest('tr');
row.addClass('trSelected').siblings().removeClass('reselected');
});
I think it only needs to remove the class before remembering the current identifier:
$(function () {
var prevTr = false;
$('tr').click(function () {
if (prevTr) {
$("#" + prevTr).removeClass('selectedtr');
}
prevTr = $(this).id;
$('input[type=radio]', this).attr('checked', 'checked');
$(this).addClass('selectedtr');
});
});
There are two .js-type's classes in every row in the table of class table and there are many rows.
I am using the following to populate the array with all the .js-type objects:
$('.js-type').each(function(){
myArray.push($(this).text());
});
My question is, is there a way for me to populate the same array with the last element found in every row in the .table class only?
This is what I tried:
Attempt1:
$('.js-type:last-child').each(function(){
myArray.push($(this).text());
});
Attempt2:
$('.js-type:last').each(function(){
myArray.push($(this).text());
});
Attempt3:
$('.js-type').eq(1).each(function(){
myArray.push($(this).text());
});
I appreciate any advice about this.
Many thanks in advance!
This will get you the last element of each row:
$('.table tr>*:last-child').each(function(){
myArray.push($(this).text());
});
This will get you the last .js-type element
$('.table tr').find('td.js-type:last-of-type').each(function(){
myArray.push($(this).text());
});
Try this!
$("tr").each( function () {
myArray.push($(this).find(".js-type").next().text());
});
Maybe something like this?
$("table tr").each(
function(i, e)
{
myArray.push( $(e).find(".js-type").eq(1).text() );
}
);
I am trying to use jQuery to pick an item in a table row that will make a change within the same row
<table>
<tr id="t1"><td><input type="checkbox" id="t1" value="" /></td></tr>
<tr id="t2"><td><input type="checkbox" id="t2" value="" /></td>{want new stuff here}</tr>
</table>
In this instance - if I select the checkbox with the id of 2 - I would want a new column to be added/appended just after the last and if this same checkbox was unchecked it would remove the content just added.
Can anyone suggest how this is done?
Make sure your id values are unique on all elements, then you can use .parents("tr"):
$(".mytable tr :checkbox").click(function () {
var checked = $(this).is(":checked"),
$tr = $(this).parents("tr").first();
if (checked) {
$tr.append("<td></td>");
} else {
$tr.find("td:last").remove();
}
});
If you're adding multiple <td>'s, then store a reference to them or use an identifier to find them again. I'm assuming you just want to add/remove a column at the end.
As with anything jQuery, there are multiple solutions! This was the one off the top of my head.
I would better have dynamic content inserted into specified TD cell instead of creating and removing td container so that you would not have to take care about correct colspans.
$('#table :checkbox').change(function() {
var cont = $(this).closest('tr').find('.content');
if ($(this).is(':checked')) {
cont.append('Some content');
}
else {
cont.empty();
}
});
Check this out:
http://jsfiddle.net/sCjXg/1/
See this jsFiddle for a quick-written example
$(function(){
$("#t2").find("input").click(function(){
if($(this).is(":checked")){
$(this).parents('tr').append("<td class='t2-add'>have new stuff</td>")
}
else{
$(this).parents('tr').find('.t2-add').remove()
}
})
})
Try something like the following:
$('[type="checkbox"]').change(function () {
var $this = $(this);
if ($this.is(':checked') {
$this.closest('tr').append('<td></td>');
} else {
$this.closest('tr').children('td:last-child').remove();
}
});
This uses the jQuery .closest(selector) method.