this.value returns undefined on a td value

Question

I am trying to get the value of a specific within a table. Using the following jQuery:

$( 'td.calendar-day' ).click(function() {
console.log(this);

Returns

<td class="calendar-day" value="2014-01-03">
<div class="day-number">3</div>
<div class="class"><a href="http://website.com" target="_blank">2</a></div>
<div class="class"><a href="http://website.com" target="_blank">2</a></div>
<div class="class"><a href="http://website.com" target="_blank">2</a></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>

When I click on the following cell

<td class="calendar-day" value="2014-01-03">

However when I add:

console.log(this.value);

It returns: undefined

Any help would be greatly appreciated. Thanks!

Answer 1

Use the data-* attribute. A table row isn't supposed to have a value attribute. Best practise would be to set a data attribute and then grab it

HTML

<td class="calendar-day" data-value="2014-01-03">

Js

$('td.calendar-day').click(function() {
    this.getAttribute('data-value') // compatible with all browsers and also the most performance efficient. See benchmark below
    // Or .. $(this).data('value')
    // Or .. this.data.value
}

Benchmark Test Courtesy of @crush