this.value在td值上返回undefined

Question

我试图获取表中特定值的值.使用以下jQuery:

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

返回

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

当我点击下面的单元格时

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

但是,当我添加:

console.log(this.value);

它返回: undefined

任何帮助将不胜感激.谢谢!

Answer 1

使用data-*属性.表行不应该具有value属性.最佳做法是设置数据属性然后抓取它

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
}

基准测试由@crush提供