How to enter the Table Header (th) value for a data-title

Question

I’m creating a responsive table with vertical tabulation, but I need to create a data-title="" with the same value as the field(th).

I was able to create the data-title using the following js:

<script>
  $('th').each(function() {
    $(this).attr('data-title', $(this).data(''));
  });
</script>

my table is like this already with the date-title :

<th id="C003" data-title="[object Object]">
<div id="apexir_C003" onclick="gReport.controls.widget(this.id)">Código</div></th>

I’d like to move on to the data-title the value of the div, in this example: "Code", would be possible?

Answer 1

Then you want to pass the element innerText to data-title, not the date attribute.

$('th').each(function() {
  $(this).attr('data-title', $(this).text());
});

Or without jQuery:

for (let el of document.getElementsByTagName('th')) {
  el.dataset.title = el.innerText.trim();
}