22

I have a site I'm working on where I want to mark if a row of data has been changed. If something has been changed in that row I would mark it with a custom attribute like so.

<tr>
  <td isDirty="true">
     ....row data
  <td>
</tr>

This works great with jQuery and it doesn't add to much code to my page.

But is this really the correct way of doing something like this and what are the downsides?

I guess another way of doing this would be like this, but it seems like over kill.

<tr>
  <td>
     ....row data
     <input id="isDirty" type="hidden" value="true" />
  <td>
</tr>
Lightness Races in Orbit
  • 378,754
  • 76
  • 643
  • 1,055
Donny V.
  • 22,248
  • 13
  • 65
  • 79
  • 1
    Duplicate: http://stackoverflow.com/questions/209428/non-standard-attributes-on-html-tags-good-thing-bad-thing-your-thoughts and http://stackoverflow.com/questions/432174/how-to-store-arbitrary-data-for-some-html-tags – Sam Meldrum Jan 13 '09 at 15:04
  • See also http://stackoverflow.com/questions/432174/how-to-store-arbitrary-data-for-some-html-tags – ChrisW Jan 13 '09 at 14:46

11 Answers11

27

Why don't you use the jQuery data capability?

Your example will be (I don't know the condition to select proper td):

$("tr td").data("isDirty", true);

take a look at documentation

tanathos
  • 5,566
  • 4
  • 34
  • 46
  • 2
    That can get ugly in server side generation which is the only point it makes sense to add such an attribute to the html. – AnthonyWJones Jan 13 '09 at 14:36
  • 4
    As an added bonus, this will pick up the (HTML5) attributes named "data-" so you can add a an attribute server-side called "data-isDirty" instead of "isDirty". It'll be valid HTML5 and although it won't validate in HTML4, it should still work cross-browser. – Davy8 Oct 11 '11 at 15:38
21

Technically you should be using the class attribute for this. Tags can have more than one class so it shouldn't affect anything

<td class="isDirty otherclass">
AAA
  • 4,928
  • 1
  • 24
  • 20
  • 1
    this is true (+1) but comes with *serious* health warnings - making something class="somequality 10" is completely unacceptable and way too common. Best practice: class is an OO construct so think in OO terms when you use it. – annakata Jan 13 '09 at 14:29
  • This isn't the answer to the general query but a response to the specific example. – AnthonyWJones Jan 13 '09 at 14:32
  • 2
    sure, but there's a responsibility to the general case on SO for the benefit of later readers – annakata Jan 13 '09 at 14:35
  • +1 to using class. I use class to store 'status' information sometimes because it affords me a CSS styling hook aswell as a reference point for the javascript. HTML5 does offer the 'data' attribute, worth a look but it'll still invalidate non HTML5 pages. – roborourke Jan 13 '09 at 14:37
  • 3
    I like using the class, but I feel like the class attribute is like a dumping ground for everything. What if down the road I end up creating a css style class thats named isDirty? Whats the downside if I just add the custom attribute? – Donny V. Jan 13 '09 at 14:46
  • 1
    I would not abuse class for this. Class already has its meaning, and putting random values there may confuse styles. I think custom attribute is better choice (I would prefix it so that it's clear that it is really custom attribute, and not some obscure HTML attribute) – Peter Štibraný Jan 13 '09 at 14:49
  • 1
    @Anthony: It might be useful to answer the general question as well, in case someone else with a similar (but not exactly the same) concern finds this question hoping for guidance. – Adam Bellaire Jan 13 '09 at 16:48
9

HTML 5 supports custom attributes prefixed with "data-". So, I would use that to be forward-compatible.

As for earlier versions, I don't think it will validate, but I wouldn't worry about that. I've heard that some browsers may ignore these tags, though. So, be sure to test it all around.

EndangeredMassa
  • 17,208
  • 8
  • 55
  • 79
  • 1
    HTML 5 is still in draft phase and support is limited at best, so there's no sense putting the cart before the horse. Also, as Jamie pointed out, the correct solution is to use CSS classes, which would apply even if you were allowed to make your own attributes - that's what they're there for. – Daniel Schaffer Jan 13 '09 at 14:33
  • No, CSS classes are there for applying styling, not storing data. They just happen to support data storage because they don't complain if no class is defined with the name you give it. It's still probably a better solution, because of browser "support", to just use a class. – EndangeredMassa Jan 13 '09 at 16:24
  • 1
    @Massa: I don't agree. Classes are there to say what kind of instance an object is.
    is more correct than
    , and hence you could argue that proper class assignment is more about adding metadata to the object than styling it!
     – Ola Tuvesson Jan 14 '09 at 16:15
  • 1
    I suppose you're right. If consider HTML by itself, then the class attribute is just describing the type of the element. In that case, then adding types that don't have css styles would make sense. However, if you want to add a value to an element, I don't think that classes are correct. – EndangeredMassa Jan 18 '09 at 00:08
2

This will prevent your page from validating I think, since you are adding custom attributes that the validators won't know about.

You might be able to do this with your own DTD or schema, but that's more work.

Your second example is the right way to do this I think. The right direction anyway.

Genericrich
  • 4,611
  • 5
  • 36
  • 55
2

Sticking to the standards for the sake of sticking to the standards is a bad reason to stick to standards.

Your page specifies the DTD, your server specifies the mimetype. As long as you aren't sending real xhtml there is no reason not use expando attributes in this way. It can be very helpful.

Ok so your page won't 'validate' if you need to care about that then don't do it.

Just don't be seduced by IEs 'conveniant' elem.isDirty method of accessing such values. Always use elem.getAttribute('isDirty') to access the value.

AnthonyWJones
  • 187,081
  • 35
  • 232
  • 306
  • Yeah, but what happens to the Next Guy that has to maintain this code? If he uses a class, it is very obvious what it is doing, and some good assumptions can be made about how it is handled by the client script. That can't really be said of adding whatever attributes you like into the code. – Daniel Schaffer Jan 13 '09 at 14:37
  • 2
    I think custom attributes tell you more about special handling code, while using class may simply mean that someone wanted to apply style for this element. – Peter Štibraný Jan 13 '09 at 14:46
  • @Daniel: such techniques aren't just done with a 'Maverick what the heck' attitude. When in a team one establish 1) that this is ok and 2) a consitent approach to doing it. For example, I use it on TRs for rowIDs. It becomes an understood approach with-in the team – AnthonyWJones Jan 13 '09 at 15:07
  • @Anthony: Surely the whole reason to have standards in the first place is so that everyone can agree what to stick to!? Sticking to standards for the sake of sticking to standards is a really good reason to do so! – Ola Tuvesson Jan 14 '09 at 16:11
  • Wow; such dangerous advice from a 76.5k user ;( – Lightness Races in Orbit Oct 11 '11 at 15:33
  • @Tomalak: Bearing in mind this is quite an old question would you care to elaborate on what is "dangerous" about the advice? I can be some what unorthodox and often kick against the new fangled over 30 years you kinda get fed up with a lot of nonsense that gets in the way of just getting stuff done. – AnthonyWJones Oct 11 '11 at 15:40
  • @AnthonyWJones: Your first sentence makes that evident :P However, personally I have not found that adhering to standards gets in the way of anything, unless you're doing it wrong. And doing so is _certainly_ worthwhile, both for immediate benefits and because it'll make it so much easier for everybody to enjoy benefits together in the future if we agree on a single "meeting place" for technology. – Lightness Races in Orbit Oct 11 '11 at 15:44
  • @Tomalak: I guess I'm too long in the tooth and jaded to believe that will ever be acheived. My view is get what __you__ need done in the best way you can with as little pain as possible. Complying to standards for sake of it where they aren't actually benefiting you is a waste. Even the big boys can't agree on the interpretation of the standards, don't fully implement all of it, add their own features that aren't covered by standards. Don't get me wrong I like standards and they can be helpful so sticking to them where they actually help is a good thing but don't do so blindly. – AnthonyWJones Oct 11 '11 at 16:12
  • @AnthonyWJones: I'm not _quite_ that cynical yet, but don't get me wrong, I fully expect to be in five or six years. :) – Lightness Races in Orbit Oct 11 '11 at 16:27
0

Years ago I used custom attributes, and they work. Doing the same following the html 5 standard, will avoid future problems, because past problem do not exist. future problems may come with movil devices and other devices different than a computer, but, as they will be part of the near future, stick with html 5 custom attributes if you want to use them. My new case is simple, what I do, is to use tags well coded, with simple data in between (variable data) which I get via nodeValue having your element ... this.firstChild.nodeValue and the key is to make the used tag display none by style how you get this? getelementbyID, by tagname, by name, by classname you choose. Advantages No need to encode decode entities, etc., no need jquery

Avenida Gez
  • 1
0

I strongly recommend to stick to standards. Web is already messed up ;)

aivarsak
  • 279
  • 1
  • 6
0

I believe that there is not a "Yes" or "No" answer to your question. Using custom attributes will help you have cleaner and shorter code in many circumstances. Your example is trivial and I believe that it can't demonstrate the power and flexibility of this technique. Specifically you are dealing with a boolean attribute, which most likely has to do with appearance. These kind of things are better handled with a class. However, with custom attributes you could add context to your nodes. You could use this context to do some calculations. For example, add a price or a weight attribute to the nodes of the list. You then later use these fields to calculate the sum or average. I am sure that there are many better than this examples out there.

On the other hand custom attributes will prevent the html from passing validation testing. This is an important problem and it may get even more important in the future.

kgiannakakis
  • 103,016
  • 27
  • 158
  • 194
0

Using custom attribute is useful from several points of view, but be sure to avoid namespace-collision by using a prefix:

<td custom:isDirty="true">

Otherwise it might clash with future implementations.

As a sidenote, a DOM-element can have custom properties like any other js-object, meaning that if you create nodes dynamically you can still add custom data of any type to your element, without affecting the validation.

var element = document.createElement('div');
element.myCustomObject = { foo: "bar", someFunction: function () { alert('foobar'); }};

document.body.appendChild(element);

Of course, the above doesn't make sense to people that never done clientside scripting without frameworks like jQuery, prototype etc... :)

jishi
  • 24,126
  • 6
  • 49
  • 75
0

isDirty is a perfect example of how a class should be named. Class names should be semantic, and I can't think of a better way of assigning a class to describe what it is about that element (other than to use title if you want to share that information with the end user)?

You shouldn't set your own attributes unless you're willing to maintain your own DTD.

Steve Perks
  • 5,490
  • 3
  • 28
  • 41
  • I see that this response got down-voted twice and up-voted twice. Are there no explanations about why this response does or doesn't jive? I'm willing to take peoples input. – Steve Perks Jan 14 '09 at 16:16
  • I didn't vote on your answer, but I would guess it is your last sentence. If I add some attributes and it works fine everywhere, I don't need a DTD. The standards are ruined, at this point just do whatever the hell works. – NateS Aug 25 '10 at 22:32
0

Adding arbitrary attributes will mean that your HTML is no longer valid.

If you are using XHTML, however, I think you can add attributes that have a different XML namespace, which won't cause validation problems.

I don't know a great deal about this, but thought I'd mention it as no one else has. Perhaps someone else could expand on, or refute, this if they have a better understanding?

SpoonMeiser
  • 19,918
  • 8
  • 50
  • 68