查找所有TD标签并读取它们的数据属性

我试图选择具有class of hours的页面上的所有TD标签，并读取每个数据属性（月份的短名称），然后将该值添加到<td>和</td>。像<td>40 Dec </td>。查找所有TD标签并读取它们的数据属性

由于我没有得到任何价值，所以我的脚本出了问题，但是我错过了什么或者错了什么？

我的jQuery：

$("tbody").find("td").each(function() { 
 
    if ($(this).hasClass("hours")) { 
 
     var d = $(this).data("date"); 
 
     $(this).append("<br>" + d); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<tbody> 
 
    <td data-date="dec" data-activityid="7" data-resourceid="1" data-projectid="2" class="workingHours-ok hours">40</td> 
 
</tbody>

来源

2016-05-12 3D-kreativ

只需使用append(function)，它遍历元素和追加返回的HTML代码。因此，在帮助函数中获取数据属性值并将其返回。

$('td.hours').append(function() { 
 
    return '<br>' + $(this).data('date'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td data-date="Dec" class="hours">40</td> 
 
    <td data-date="Jan" class="hours">50</td> 
 
    </tr> 
 
    <tr> 
 
    <td data-date="Feb" class="hours">60</td> 
 
    <td data-date="Mar" class="hours">70</td> 
 
    </tr> 
 
    <tr> 
 
    <td data-date="Jan" class="hours">60</td> 
 
    <td data-date="Mar" class="hours">70</td> 
 
    </tr> 
 
</table>

来源

2016-05-12 14:17:34

你并不需要使用each()。你可以像下面这样做。

$('td.hours').text(function (index, text) { 
 
    return text + ' ' + this.dataset.date; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <td data-date="Dec" class="hours">40</td> 
 
     <td data-date="Jan" class="hours">50</td> 
 
    </tr> 
 
    <tr> 
 
     <td data-date="Feb" class="hours">60</td> 
 
     <td data-date="Mar" class="hours">70</td> 
 
    </tr> 
 
</table>

来源

2016-05-12 14:14:16 Azim

孩子你能避免调用'jQuery的（）'再次'.text（function（index，text）{}）' – guest271314

假设你在标记有tbody，试试这个

$("tbody td.hours").each(function() { 
    $(this).append("<br>" + $(this).data("date")); 
});

或者干脆

$("td.hours").each(function() { 
    $(this).append("<br>" + $(this).data("date")); 
});

，或者使用简单attr如果数据日期设置动态

$("td.hours").each(function() { 
    $(this).append("<br>" + $(this).attr("data-date")); 
});

来源

2016-05-12 14:14:24 gurvinder372

因为你$（本）。数据（ “DATE”）。这是不应该working.You使用$（本）。数据（ '日期'） 当然，你的选择就应该像

$("#yourtableid > tbody td.hours").each(function(){ 
var d= $(this).data('date');//and so on//})

来源

2016-05-12 14:19:44 mayk

它是你的代码，因为它只是前加<table> 210，因为在你的代码，<tobody>不是父母<td>，除非使用`的text`论点是的<table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 

 
<table><tbody> 
 
    <td data-date="dec" data-activityid="7" data-resourceid="1" data-projectid="2" class="workingHours-ok hours">40</td> 
 
</tbody></table> 
 

 

 
<script> 
 
$("tbody").find("td").each(function() { 
 
    if ($(this).hasClass("hours")) { 
 
     var d = $(this).data("date"); 
 
     $(this).append("<br>" + d); 
 
    } 
 
});</script>

来源

2016-05-12 14:35:04

查找所有TD标签并读取它们的数据属性

回答

相关问题