如何通过html事件传递（或引用）“ $（this）”？

Question

Let's say I have a button in a table which adds a new row to a table:

<td><a onclick="addRow()"></a></td></tr>...

and I want to reference $(this) or $(this).closest('tr') from the function at the bottom of the page.

function addRow(){
   $(this) // contains all information from the row which pressed the button

}

Simply passing a javascript variable from the HTML will result in null (as expected). Is there a way to reference the row that pressed the button?

Answer 1

The RECOMMENDED way of doing this is unobtrusive and delegated - give the link a class:

 var $tb = $("#someTable"); $tb.on("click", ".addRow", function(e) { // delegation to allow new rows' links to work e.preventDefault(); // stop any click side effects var $row = $(this).closest("tr"); $tb.append($row.clone()) }); 

 a { text-decoration:none } td,th { padding:3px } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <thead> <tr> <th>A</th> <th>B</th> <th>Add</th> </tr> </thead> <tbody id="someTable"> <tr> <td>1st</td> <td>2nd</td> <td><a class="addRow" href="#">+</a></td> </tr> <tr> <td>3rd</td> <td>4th</td> <td><a class="addRow" href="#">+</a></td> </tr> </tbody> </table> 

Answer 2

Use this

<td><a onclick="addRow(this)"></a></td></tr>

and then:

 function addRow(e){ console.log($(e)) // contains all information from the row which pressed the button } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a onclick="addRow(this)">Clickme</a> 

Answer 3

You can reference the row that you clicked using an event.

<td><a href="javascript:addRow(this)">Add</a></td>

and in javascript you can check the event

<script>
    function addRow(event) {
      console.log(event);

    }
  </script>