获取td中的数据属性值

时间:2014-12-22 15:23:33

标签: javascript jquery html html-table

我在td中添加数据属性:

   <td style="text-align:center;padding: 3px 0;data-id:2;data-env:PL1;"><img  src="/VendorFeedDevUI/Content/green.png" style="width:25px" alt="Green"><div>21 Dec 14<br>23:55:00</div></td>

当我想在Jquery中检索相同的属性时,我使用下面的代码:

  $(".gradienttable tr td").click(function () {
        showRefreshControl();
        var id = $(this).attr('data-id');
        var env = $(this).data('env')
       });

我试图使用两种方式来获取数据属性,但两者都返回undefined。  我也得到了$(this)的td对象,所以这不是问题。  那么我做错了什么?

4 个答案:

答案 0 :(得分:4)

你使用的方式错误:

 <td style="text-align:center;padding: 3px 0;" data-id="2" data-env="PL1">...</td>

您将数据属性添加到样式中,您必须将其放在样式属性之外。

答案 1 :(得分:1)

   <td style="text-align:center;padding: 3px 0;" data-id="2" data-env="PL1"><!-- ... --></td>

这就是你如何设置属性,而不是你的风格。

然后你可以像在这里一样捡起它:

  $(".gradienttable tr td").click(function () {
        showRefreshControl();
        var id = $(this).attr('data-id');

答案 2 :(得分:1)

这不是HTML中的data属性,它是一个不存在的CSS属性。更改HTML以实际使用正确的属性,然后您的代码应该工作:

<td style="text-align: center; padding: 3px 0;" data-id="2" data-env="PL1">
   <img src="/VendorFeedDevUI/Content/green.png" style="width:25px" alt="Green" />
   <div>21 Dec 14<br>23:55:00</div>
</td>

答案 3 :(得分:0)

<td style="text-align:center;padding: 3px 0;" data-id = "2" data-env = "PL1">