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查询数据”表中的动态值，当我们更改位置时它会自动更新。所以我不能直接将此值添加到点击事件

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

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

function getFilter(e){
    var evID = $(e).closest("th").data('column-index');
    console.log( evID );
}

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

2 个答案: