CODEWITHSUNDEEP
javascriptjquery
Manesh
Manesh

Reputation: 596

Passing values to jquery function on click of button

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" />

Upvotes: 0

Views: 503

Answers (1)

zb&#39;
zb&#39;

Reputation: 8049

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>

Upvotes: 1

Related Questions