在td中获取数据属性值

Question

I am adding data attribute in td something like this :

   <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>

When I want to retrieve the same attribute in Jquery I am using below code :

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

I am trying to use both ways to get data attributes but both are returning undefined. Also I am getting td object for $(this) so that is not an issue. So what am I doing wrong ?

Answer 1

You are using it the wrong way:

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

You add the data attributes to your styles, you have to place it outside the style attribute.

Answer 2

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

That's how you set attributes, not within your style.

You can then pick it up like you have done here:

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

Answer 3

That's not a data attribute in your HTML, it's a CSS property which does not exist. Change your HTML to actually use the correct attributes then your code should work:

<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>

Answer 4

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