Question

假设我在表格中有一个按钮，该按钮会向表格中添加新行：

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

并且我想从页面底部的功能引用$(this)或$(this).closest('tr')。

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

}

仅从HTML传递javascript变量将导致null（如预期）。有没有办法引用按下按钮的行？

Answer 1

推荐的方法是不引人注意和委托的-给链接一个类：

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

使用this

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

然后：

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

您可以引用使用事件单击的行。

CatName_autocomplete

并且在javascript中您可以检查事件

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

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

3 个答案: