CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc-3asp.net-mvc-4
user2017909
user2017909

Reputation: 117

Get the rowid of table on double click event in jquery

I am using mvc4 and jquery.

I am trying to find a way to make an entire row to fire doubleclick event.

My scenario is, the model that contains the parameters Person ID, FirstName and Lastname.

But html table only show the FirstNmae and Lastname.

Where to store the person id ,if it hidden it will not get in javascript and space problem also.

My need is to, make the rows doubleclickable and that time get the personID and second is to hide the person id from the enduser.

For getting personid I used,

$('#EditTable td').dblclick(function () {
    $(this).find('td:eq(1)')
    $(this).find('td:first').text()
}

but not get any value.

Upvotes: 2

Views: 13991

Answers (5)

Aravind
Aravind

Reputation: 178

Actually you can store the model details in DOM tree using $.data('personID',1) method. In that way you can hide the personID from the user. When the user dbl clicks on a row, get the corresponding personID like $.data('personID')

//setting the personID
$.data('personID',2);

//getting the personID
$.data('personID'); //returns 2

Upvotes: 1

musefan
musefan

Reputation: 48415

Solution

The problem is that the event is firing for the td element, so this refers to the td element. You need to get the parent tr and then call the find function.

Something like this:

$('#EditTable td').dblclick(function () {
    var $this = $(this);
    var row = $this.closest("tr");
    row.find('td:eq(1)');
    row.find('td:first').text();
}); //<-- NOTE: you dont close correctly in your example, which cause console errors

Here is a working example.

Alternatively, you could assign the event to the tr element instead, which would allow you to keep your original function code...

$('#EditTable tr').dblclick(...

Personally, I would prefer to store "metadata" type things using a data attribute. For example:

$('#EditTable td').dblclick(function () {
    var $this = $(this);
    var row = $this.closest("tr");
    var id = row.data("id");
});

with the following html table:

<table id="EditTable">
    <tr data-id="1">
        <td>1</td><td>One</td>
    </tr>
</table>

Here is a working example using data attributes.

Upvotes: 8

bipen
bipen

Reputation: 36531

try this

$('#EditTable tr').dblclick(function () {
  var $this=$(this);
  $this.find('td:first').text(); //get personid
  $this.find('td:first').hide(); //hide the personrow... u can use remove()
});

Upvotes: 0

Jai
Jai

Reputation: 74738

try this one:

 $('#EditTable tr').dblclick(function () {
   $(this).find('td:eq(1)')
   $(this).find('td:first').text()
 });

Try to iterate through TRs instead and may be that's a typo or what you have a error at closing that should be });

Upvotes: 0

iappwebdev
iappwebdev

Reputation: 5910

You have to write:

// You want event fired on row `tr` and not on `td`
$('#EditTable tr').dblclick(function () {
    $(this).find('td:eq(1)')
    $(this).find('td:first').text()
}

Edit

Best way would be:

$('#EditTable').on(dblclick, 'tr', function () {
    var $rowClicked = $(this);
    var secondCell = $rowClicked.find('td:eq(1)');
    var textOfFirstCell $rowClicked.find('td:first').text();
}

Upvotes: 0

Related Questions