How to identify td line to mount a dynamic data-title

Asked

Viewed 111 times

0

I’m setting up a responsive table with vertical alignment where css inserts via:content: attr(data-title); the value of the thead field(th).

HTML desired

<table class="table table-bordered table-striped mb0">
      <thead>
         <tr>
           <th>Codigo </th>
           <th>Nome </th>
           <th>Telefone </th>
         </tr>
      </thead>
  <tbody>
        <tr>
          <td data-title="Código">113244</td>
          <td data-title="Nome">Fulano da Silva</td>
          <td data-title="Telefone">+55 11 3213213</td>
       </tr>
  </tbody>
</table>

HTML religion

<table class="table table-bordered table-striped mb0">
      <thead>
         <tr>
           <th>Codigo </th>
           <th>Nome </th>
           <th>Telefone </th>
         </tr>
      </thead>
  <tbody>
        <tr>
          <td data-title="Código">113244</td>
          <td data-title="Código">Fulano da Silva</td>
          <td data-title="Código">+55 11 3213213</td>
       </tr>
  </tbody>
</table>

JS

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

CSS

#no-more-tables td::before {
    content: attr(data-title);
}

It would be possible to use a dynamic mode, where each data-title be referring to your thead th?

javascript css

  • Hi Kim. Try to mark the answers to your questions. If you don’t know how it works, see the page Tour.

2 answers

0


Itere first the titles, then do in tr, see below:

var headers=[];
$('th').each(function() {
   headers.push($(this).text());
 // $('td').attr('data-title', $(this).text());
});


$('tr').each(function(i, tr) {
  var tr =$(tr);
  tr.each(function(j, td) {
       $(td).attr('data-title',headers[i-1]);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-striped mb0">
      <thead>
         <tr>
           <th>Codigo </th>
           <th>Nome </th>
           <th>Telefone </th>
         </tr>
      </thead>
  <tbody>
        <tr>
          <td data-title="Código">113244</td>
          <td data-title="Nome">Fulano da Silva</td>
          <td data-title="Telefone">+55 11 3213213</td>
       </tr>
  </tbody>
</table>

0

The way you’re doing ($('td').attr('data-title', $(this).text());) will change all the td's at once every turn in the loop.

You can run through every th and amending its td of tbody by index (i) loop-generated .each.

The selector :eq() searches the element by its index in the collection, that is, the first th is connected to the first td because they both have an index 0 in their collections:

$('thead th').each(function(i) {
   
   $(this)                                // th do loop
   .closest('thead')                      // pai thead
   .next('tbody')                         // próximo tbody
   .find('td:eq('+i+')')                  // busca o "td" com o índice da vez
   .attr('data-title', $(this).text());   // altera o atributo
});

// a linha abaixo é apenas um exemplo para
// verificar no console os atributos alterados
console.log($("tbody").html());
#no-more-tables td::before {
    content: attr(data-title);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="no-more-tables" class="table table-bordered table-striped mb0">
   <thead>
      <tr>
        <th>Codigo</th>
        <th>Nome</th>
        <th>Telefone</th>
      </tr>
   </thead>
  <tbody>
        <tr>
          <td data-title="">113244</td>
          <td data-title="">Fulano da Silva</td>
          <td data-title="">+55 11 3213213</td>
       </tr>
  </tbody>
</table>

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.