CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Mr PHP
Mr PHP

Reputation: 33

how to use jquery this

Instead of using Click event i'm using .on for this.But i want to get the first td html when i click to the deleteArticle button.how would i select it using jquery this or something 

$("#pard_admin").on("click", ".deleteArticle", function (event) {
    var data = $(this).closest('tr').find('td:first').html();
});

in above this is relevant to the #pard_admin not for .deleteArticle i guess

$(".deleteArticle").click(function (event) {
    var data = $(this).closest('tr').find('td:first').html();
});

In here this is relevant to .deleteArticle.So how would i use this select to get the just click .deleteArticle button closest tr td first innetHHTMl ?

enter image description here

Upvotes: 0

Views: 83

Answers (3)

Blauharley
Blauharley

Reputation: 4246

You can define an event-listener-function that way without jquery:

var firstTd = document.getElementById('firstTd');

// or 

var firstTd = document.getElementsByClassName('firstTd')[0];

var eventHandler = function(td){
   console.log('firstTd: ',td);
}.bind(null,firstTd); // firstTd is the value for the first param

document.getElementsByClassName('deleteArticle')[0].addEventListener('click',eventHandler);

What the code does is to create a function by using bind. You can define values for the params of the created function:

var createdFunction = function(){}.bind(/* param for this */, /* first param for the created function */, /* second...*/)

When the createdFunction is called it has got access to a certain value you defined with bind (first param for the created function, second...).

When you want to get the whole table so that you can iterate over each td-element, you can do this the way:

 var firstTd = document.getElementById('firstTd');
 var eventHandler = function(td){

    console.log('table: ',this);
    console.log('table-children: ',this.children);
    var tableChildren = Array.prototype.slice.call(this.children); // casts htmlCollection to Array
    // now you can iterate over each td-element and use the Array-Methods (slice, split, reverse..)

 }.bind(document.getElementsByClassName('mytable')[0]); // sets html-table-element as

 document.getElementsByClassName('mytable')[0].addEventListener('click',eventHandler);

I hope this helps you.

Upvotes: 0

Suresh Atta
Suresh Atta

Reputation: 121998

in above this is relevant to the #pard_admin not for .deleteArticle i guess

The above statement is incorrect.

If you see docs

the event only needs to bubble up one level (from the clicked tr to tbody):

So .deleteArticle gets selected.

And where $(this) is creating jQuery object from the event.target.

Upvotes: 0

Khanh TO
Khanh TO

Reputation: 48972

In both your cases, this refers to the same element .deleteArticle if you click on .deleteArticle

Upvotes: 1

Related Questions