单击锚标记时获取父<th>的属性值

Question

我有以下表结构：<th data-column-index="7">Total Activity Amount     <a class="btn btn-app btn-default filterStyle" onclick="getFilter(this)">        <i class="fa fa-filter f_7" aria-hidden="true"></i>    </a></th>当我单击 getFilter() OnClick 事件时，我需要获取“数据列索引”值。我已经尝试过以下在 Onclick 事件中获取父值的方法function getFilter1(e){    var evID=$(e).parent().find('data-column-index').val();    alert(evID);}或者var evID =  $(this).parent('thead th').attr("data-column-index");或者var evID = $(this).closest('th').attr("data-column-index");我得到相同错误的所有原因，例如“错误！内容未定义。请帮我解决这个问题。谢谢请注意： 'data-column-index' 是 J Query 数据表中的动态值，当我们改变位置时它会自动更新。所以我不能直接将此值添加到点击事件

Answer 1

您可以尝试使用 jQuery .data()

存储与匹配元素关联的任意数据，或在命名数据存储中返回匹配元素集中第一个元素的值。

function getFilter(e){

  $(e).parent().data('column-index', 8); // change the value

  var evID=$(e).parent().data('column-index');

  alert(evID);

}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>

  <thead>

    <th data-column-index="7">Total Activity Amount 

      <a class="btn btn-app btn-default filterStyle" onclick="getFilter(this)">

          <i class="fa fa-filter f_7" aria-hidden="true"></i>

      </a>

    </th>

  </thead>

</table>

Answer 2

您可以使用closestjQuery 的方法来获取th列，然后使用它的属性column-index

function getFilter(e){

    var evID = $(e).closest("th").data('column-index');

    console.log( evID );

}