CODEWITHSUNDEEP
jquery
JL9
JL9

Reputation: 543

How to select an item from a table using jQuery, when a button is pressed in that row.

I'm going to explain this the best I can...

So I have a table that is dynamically generated and populated using jQuery. In each row of the table there is a button, when a button is pressed I need to select the text that is in the first column of that row.

For example:

If you imagine in the button column below there are actually buttons there. If for example I click the button2, then I need to select name2. How might I do this. table

I've got the handler for the button, and when I click the buttons the alert "clicked" appears.

            $("#mTable").on("click", ".buttons",
            function () {
                alert("clicked");
            })

Any ideas on how I can change the function so the corresponding name is selected when the button in the same row is pressed.

Upvotes: 0

Views: 1162

Answers (2)

Mike Hamilton
Mike Hamilton

Reputation: 1567

Do you have control over the HTML that is output? If so, you can give each table cell in the name column a class. If you do that, you can use jQuery to find table row tr that contains the button that was clicked, from there you can look inside for a cell with the class .name (just as an example) and return the value.

HTML

<table id="mTable">
  <tr>
    <td><span class="name">Name 1</span></td>
    <td><span class="address">Address 1</span></td>
    <td><button class="buttons">Button 1</button></td>
  </tr>
  <tr>
    <td><span class="name">Name 2</span></td>
    <td><span class="address">Address 2</span></td>
    <td><button class="buttons">Button 2</button></td>
  </tr>
  <tr>
    <td><span class="name">Name 3</span></td>
    <td><span class="address">Address 3</span></td>
    <td><button class="buttons">Button 3</button></td>
  </tr>
</table>

JS

$("#mTable").on("click", ".buttons", function () {
    alert($(this).closest('tr').find('.name').text());
});

http://codepen.io/anon/pen/zoReBP

Upvotes: 1

casraf
casraf

Reputation: 21694

this should hold the element being interacted with. Since you want to get elements on the same row, you could use closest to get the row itself, and find the appropriate child inside.

Something like this should work:

$(document).ready(function() {
  $("#mTable").on("click", ".buttons", function() {
    var $tr = $(this).closest('tr'),
      $el = $tr.find('.name-span'), // or whatever your selector is
      name = $el.text();
    
    // (you can also shorten this up):
    // var name = $(this).closest('tr').find('.name-span').text();

    alert(name + " clicked");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mTable">
  <tr>
    <td><span class="name-span">Name 1</span></td>
    <td><span class="address-span">Address 1</span></td>
    <td><button class="buttons">Button 1</button></td>
  </tr>
  <tr>
    <td><span class="name-span">Name 2</span></td>
    <td><span class="address-span">Address 2</span></td>
    <td><button class="buttons">Button 2</button></td>
  </tr>
  <tr>
    <td><span class="name-span">Name 3</span></td>
    <td><span class="address-span">Address 3</span></td>
    <td><button class="buttons">Button 3</button></td>
  </tr>
</table>

You may also replace .text() with whatever you want to get from the element.

Upvotes: 2

Related Questions