Finden Sie alle TD-Tags und lesen Sie ihr Datenattribut

Question

Ich versuche, alle TD Tags auf der Seite, die eine class of hours hat, und lesen Sie jedes Datenattribut (Kurzname des Monats) und fügen Sie diesen Wert nach dem aktuellen Inhalt innerhalb der <td> und </td>. Wie <td>40 Dec </td>.

Da ich keinen Wert bekommen, ist etwas falsch mit meinem Skript, aber was habe ich verpasst oder falsch gemacht?

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

Answer 1

Gerade append(function), benutzen, die über die Elemente iterieren und hängt den HTML-Code zurückgegeben. So erhalten Sie innerhalb der Hilfsfunktion den Datenattributwert und geben ihn zurück.

$('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>

Answer 2

Sie brauchen nicht each() zu verwenden. Sie können es wie folgt tun.

$('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>

Answer 3

Angenommen, Sie tbody in Ihrem Markup haben, versuchen Sie diese

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

oder einfach

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

oder einfach mit attr wenn Daten-Datum gesetzt dynamisch

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

Answer 4

Aufgrund Ihrer $ (this) .data ("date") .Dies ist nicht working.You $ verwenden sollte (this) .data ('date') natürlich sollten sie Ihre Wähler wie

sein

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

Answer 5

es Ihr Code ist, da es nur <table> vorhinzufügen wird 210, weil in Ihrem Code ein <tobody> ein Kind <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>