Passing values to jquery function on click of button

Question

I have the following table in my HTML page, I'm a newbie to Jquery

<table class="table table-hover">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Start Date</th>
                        <th>Severity</th>
                        <th>Edit Data</th>
                    </tr>
                </thead>
                <tbody id="myTable">

                        <tr style="display: table-row;">
                            <td>New Rule</td>
                            <td>New Rule</td>
                            <td>2017-04-04</td>
                            <td>High</td>
                            <td>
                                <button class="btn btn-primary btn-sm editBtn">
                                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                                    Edit
                                </button>
                                <button onclick="window.location =&quot;/EmployeeSpringMVC/delRule/5&quot;" data-method="delete" class="btn btn-danger btn-sm">
                                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                    Delete
                                </button>
                            </td>
                        </tr>

                </tbody>
            </table>

As you can see there is an edit button I can write a function to recognize clicks to this button as given below

$('.editBtn').click(function(){
        alert("test");
    });

I also need the data in the particular row for some processing in the function. How can I get this data from the table row. Please feel free to suggest if there is a better way.

I saw the question here but I did not understand this statement of the answer.

var id = $(this).attr('id');

How is the id passed to the function. What specifies the id in this.

<input id="btn" type="button" value="click" />

`$(this).closest("tr")` in jQuery or `this.closest("tr")` in modern browsers that implement the native `.closest()` method, which can be polyfilled if needed. In both, `this` is the element to which the handler was bound, and `.closest()` traverses up the ancestors from that point until it finds an element matching the `"tr"` selector. — , Apr 05 '17 at 13:28
...from there, you can get the `td` elements, in jQuery it'll be `.children("td")` or natively, `.cells`. — , Apr 05 '17 at 13:29
Possibly duplicate of http://stackoverflow.com/questions/7350860/how-to-pass-parameter-to-click-event-in-jquery — Mohammad Mustaqeem, Apr 05 '17 at 13:29
Not knowing if you are aware or not I will suggest to use DataTable.NET for this kind of data table, it will save you a TON of time. https://datatables.net/ — ProgrammerV5, Apr 05 '17 at 13:30
@MohammadMustaqeem I saw that question but did not understand this statement var id = $(this).attr('id'); — Manesh, Apr 05 '17 at 13:33

score 1 · Accepted Answer · answered Apr 05 '17 at 13:40

Because you probably need all <td> in row, except current one I would suggest to use siblings() method of closest <td>:

$('.editBtn').click(e => {
  e.preventDefault();
  const $td = $(e.target).closest('td');
  const fields = Array.from($td.siblings('td').map((i, e) => $(e).text()));
  console.log(fields);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover">
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
      <th>Start Date</th>
      <th>Severity</th>
      <th>Edit Data</th>
    </tr>
  </thead>
  <tbody id="myTable">

    <tr style="display: table-row;">
      <td>New Rule</td>
      <td>New Rule</td>
      <td>2017-04-04</td>
      <td>High</td>
      <td>
        <button class="btn btn-primary btn-sm editBtn">
                                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                                    Edit
                                </button>
        <button onclick="window.location =&quot;/EmployeeSpringMVC/delRule/5&quot;" data-method="delete" class="btn btn-danger btn-sm">
                                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                                    Delete
                                </button>
      </td>
    </tr>

  </tbody>
</table>

Passing values to jquery function on click of button

1 Answers1