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仅带回w.fn.init(0)（长度不确定，这是什么意思），长度为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有效的必需条件。

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

1 个答案: