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

Posted 2023-02-22

【中文标题】单击锚标记时获取父<th>的属性值[重复]

【英文标题】：get attribute value of parent <th> when anchor tag on click [duplicate]

【发布时间】：2020-03-28 01:16:22

【问题描述】：

我有以下表结构：

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

【问题讨论】：

你试过这个$(e).parent().data('column-index') 吗？

你也不能使用this，因为你还没有使用jquery绑定——你直接使用onclick绑定，然后将this作为e传递给你的函数

@AliShahbaz。抱歉，我没有尝试使用该选项。现在它正在工作。谢谢

@AliShahbaz 抱歉，我的“列索引”是动态设置的数据属性。所以我不能使用数据（）。有没有替代品？

【参考方案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>

【讨论】：

您好 Mamun，感谢您的回答。它现在正在工作。我需要再澄清一下。如果我更改 'data-column-index' 值而不刷新页面，当我尝试下一个点击事件时会得到吗？

@BibinJames，我不确定在不刷新页面的情况下更改值这个术语。如果 data-column-index 的值被 javascript 改变了，那么点击时你会得到新的值:)

谢谢马蒙。对于上述问题，我们不能使用 data() 因为我的数据值是动态变化的。不要使用 jQuery .data() 来动态设置数据属性。我们可以使用 .attr() 。我的问题解决了。谢谢***.com/questions/21588044/…

【参考方案2】：

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

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