How can I get the above table on button click?

Question

This is very similar to this question, but it's not working for me. I've also looked at this and this, but still not working.

I need to get the table ID above the clicked button.
If I click the top button (remove request div) I would get table t1 ID.

My code looks like this:

<table id="t1"></table>

<div class="bulk_action">
  <div title="Remove requests" class="trash_iconset_grey_16px removeRequest"></div>
  <div title="some other button" class="abc"></div>
</div>

<table id="t2"></table>

<div class="bulk_action">
  <div title="Remove requests" class="trash_iconset_grey_16px removeRequest"></div>
  <div title="some other button" class="abc"></div>
</div>

JS code

jQuery('.removeRequest').live ('click', function(){
  var div_obj = jQuery(this).closest('div');
  //alert(jQuery(div_obj).attr('class')); //<-- this works

  var tbl = jQuery(div_obj).prev('table:first'); // <-- This is not working
  alert(jQuery(tbl).attr('id'));
});

Does anyone have any tips on how to solve this?

zen · Accepted Answer · 2012-03-16T17:07:23.883

1

By going to the parent of the button, you can then ask for the closest table:

jQuery('.removeRequest').live('click', function(){
  var div_obj = $(this).parent();
  var tbl = div_obj.prev('table');
  alert(tbl.attr('id'));
});

http://jsfiddle.net/XNWsy/1/

edited Mar 16 '12 at 17:07

answered Mar 15 '12 at 19:59

zen

571
5
13

As I said in my answer, you don't need to enclose `div_obj` in `$()`, it's already a jquery object!!! See [updated jsFiddle](http://jsfiddle.net/XNWsy/1/) as proof that it works :) – bfavaretto Mar 15 '12 at 20:11

score 0 · Answer 2 · answered Mar 15 '12 at 19:40

0

You don't have to construct a new jQuery object for the div when looking for the table. It's already a jQuery object. I mean, use this:

var tbl = div_obj.closest('table'); 
alert(tbl.attr('id'));

answered Mar 15 '12 at 19:40

bfavaretto

71,580
16
111
150

Selvakumar Arumugam · Answer 3 · 2012-03-15T20:05:11.130

You can simply use .prev if your markup structure is same always,

DEMO

jQuery('.removeRequest').live ('click', function(){
  var div_obj = jQuery(this).closest('div');
  alert(jQuery(div_obj).attr('class')); //<-- this works

  var tbl = jQuery(this).closest('.bulk_action').prev(); // <-- Will get you the table
  alert(tbl.attr('id'));
});

or If the markup may have some elements between the div and the table then use .closest('table') like below,

DEMO

jQuery('.removeRequest').live ('click', function(){
  var div_obj = jQuery(this).closest('div');
  //alert(jQuery(div_obj).attr('class')); //<-- this works

  var tbl = jQuery(this).closest('.bulk_action').prev('table'); // <-- Will get you the table
  alert(jQuery(tbl).attr('id'));
});

Note: Use .on if you are using jQuery version 1.7 or use .delegate for older versions.

Using .on (for jQuery v1.7)

jQuery(document).on('click', '.removeRequest', function(){

Using .delegate (for older versions)

jQuery(document).delegate ('.removeRequest', 'click', function(){

PS: replace jQuery(document) with any wrapper selector that wraps the div and the tables.

score 0 · Answer 4 · answered Mar 15 '12 at 19:43

0

If I understand you correctly, this might work:

jQuery('.removeRequest').live ('click', function(){
    var tbl = jQuery(this).closest("table");
    alert(jQuery(tbl).attr('id'));
});

answered Mar 15 '12 at 19:43

Daniel Lorenz

4,178
1
32
39

How can I get the above table on button click?

4 Answers4