jQuery内联属性值

Question

Can i get some suggestions. Do you have better way to do this?

Most of the time when i got a group of data input in Html table, I always level data like some reference id like "student_id", or "country_id" to parent structure like or ,

for example

<tr student_id="1" subject_id="2" school_id="5" country_id="6">
 <td></td>
 <td></td>
 <td></td>
 <td></td>
  .....
  ......
</tr>
....
.....

<tr student_id="43" subject_id="35" school_id="22" country_id="411">
 <td></td>
 <td></td>
 <td></td>
 <td></td>
  .....
  ......
</tr>
....
.....

when i call javascript function i can get and get those id in function

var tr  = $(this).closest('tr');
var student_id =  $(this).attr('student_id');
var subject_id =  $(this).attr('subject_id');
var school_id =  $(this).attr('school_id');
.......

Do you got better way to store these kind of reference ? Thanks.

Answer 1

The HTML5 way of doing this that is backwardly compatible with older browsers and has specific support in jQuery is with data-xxx attributes.

<tr data-student_id="43" data-subject_id="35" data-school_id="22" data-country_id="411">

var tr  = $(this).closest('tr');
var student_id = tr.data('student_id');
var subject_id = tr.data('subject_id');
var school_id = tr.data('school_id');

One of the rationales behind doing it this way in HTML5 is this puts all custom data attributes in the "data-" namespace which is guaranteed to never conflict with future standard attributes that might be defined on any HTML tag. In jQuery, it also unifies it with the .data() method of storing per object data.

Note, when using jQuery's .data(key) method, it also tries to convert the data to a native javascript type so in your case above, it would convert those values to numbers automatically.