单击TD中的“ OnClick”功能时，使用jQuery获得最近的TR吗？

Question

这可能吗？ 我使用内联onclick函数阻止获取TR行的事实吗？

我的表格行看起来像这样：

<tr role="row" class="odd"><td><a class="masterskutd" id="mastersku_FL538-J"
      onclick="editMasterSKU('FL538-J');return false;">FL538-J</a></tr>

在外部JS文件functions.js我正在尝试这样的事情

function editMasterSKU(SKU) {
    var tr = $(this).closest('tr');
    $(tr).addClass('clicked');
    // var tr = $(this).parents('tr');
    console.log(tr);

我似乎什么也没捕捉到单击该函数的TR， console.log仅带回长度为0的w.fn.init(0) （并不完全确定这是什么意思），并且未添加上课。

在td / a单击onclick函数时，如何在jQuery变量中获取TR？

Answer 1

问题是因为从内联事件属性调用的函数不在引发事件的元素的范围内运行。 它们而是在window范围内运行，因此this不是您期望的那样。

要解决此问题，您可以将this作为参数从onclick传递给函数：

 function editMasterSKU(a, SKU) { var tr = $(a).closest('tr'); $(tr).addClass('clicked'); } 

 .clicked { color: #C00; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr role="row" class="odd"> <td> <a class="masterskutd" id="mastersku_FL538-J" onclick="editMasterSKU(this, 'FL538-J');return false;">FL538-J</a> </td> </tr> </table> 

但是，值得注意的是，您根本不应该使用内联事件属性。 改用不显眼的事件处理程序。 由于您已经在页面中包含了jQuery，因此可以这样完成：

 jQuery(function($) { $('.masterskutd').on('click', function(e) { e.preventDefault(); var $tr = $(this).closest('tr'); $tr.addClass('clicked'); console.log($(this).data('sku')); }); }) 

 .clicked a { color: #C00; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr role="row" class="odd"> <td> <a class="masterskutd" id="mastersku_FL538-J" data-SKU="FL538-J" href="#">FL538-J</a> </td> </tr> </table> 

请注意，使用data属性将自定义元数据存储在元素本身中，还添加了href属性，这是HTML有效的必需属性。