Is it possible to add a data attribute to a table cell using jquery? I have the following but it doesn't add a data-attribute to the td.

$("td.row").each(function( index ) {
  $(this).data("rowid",index);
});

Any ideas?

Is it possible to add a data attribute to a table cell using jquery? I have the following but it doesn't add a data-attribute to the td.

$("td.row").each(function( index ) {
  $(this).data("rowid",index);
});

Any ideas?

• javascript
• jquery

• Do you want the actual attribute to show up? – Shawn31313 Commented Jul 14, 2013 at 23:55
• Because if you do, then you need to use: $(this).attr("data-rowid", index); – Shawn31313 Commented Jul 14, 2013 at 23:55
• I used the inspect element tool in Chrome, but the data-rowid attributes don't appear in the td using the jQuery code. – Spencer Commented Jul 14, 2013 at 23:57
• data() stores atribitrary data on the element, it does not set the data attribute, but it can be confusing as data() will get the data attribute in some cases. – adeneo Commented Jul 14, 2013 at 23:57
• .data() allows you to store data associated with an element and it does allow you to get the data from already set data-* attributes. But it doesn't actually add data-* attributes to an element. – Shawn31313 Commented Jul 14, 2013 at 23:58

1 Answer 1

.data() allows you to store data associated with an element. It does allow you to get the data from element with an already set data-* attribute, but it doesn't actually allow you to add data-* attributes to an element.

.attr() allows you to add this attribute though.

$("td.row").each(function( index ) {
    $(this).attr("data-rowid", index);
});

You can also use @CrazyTrain's solution which seems a little more efficient:

$("td.row").attr("data-rowid", function(index) { 
    return index;
});