Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Take table header text to prepend on table body cell

I have a table and need to get it responsive. What I need to do is to take each column’s header’s text to prepend on this column’s body cell by using Jquery.

Problem: I am getting all 3 headers text prepend on all table body cells! ( It should be: CountryAlfreds, but I get CountryContactCompanyAlfreds, for example)
Please take a look at my sample below and direct me how to take each column’s header’s text to prepend on this column’s body cell.
Any help would be appreciated!

$('thead tr th').each( function(e) {
var headerText = $(this).html();
console.log("Header " + headerText);

 $(`table tbody tr td`).prepend("<span>" + headerText + "</span>")

})
span {
color: red;
font-weight: 700
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table>
 <thead>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  </thead>
  <tbody>
    
 
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr> 
  </tbody>
</table>
Tags:

3

Answers


  1. 0

    I’m not sure to have understood correctly, but if this is what you’re looking for, I would suggest putting each column’s cells in the same class:

    $('thead tr th').each( function(e) {
var headerText = $(this).html();
console.log("Header " + headerText);

 $(`table tbody .${headerText.toLowerCase()}`).prepend("<span>" + headerText + "</span>")

})
    span {
color: red;
font-weight: 700
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table>
 <thead>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  </thead>
  <tbody>
    
 
  <tr>
    <td class="company">Alfreds Futterkiste</td>
    <td class="contact">Maria Anders</td>
    <td class="country">Germany</td>
  </tr>
  <tr>
    <td class="company">Centro comercial Moctezuma</td>
    <td class="contact">Francisco Chang</td>
    <td class="country">Mexico</td>
  </tr> 
  </tbody>
</table>
    Login or Signup to reply.
  2. 0

    You need to consider the index of TD as well

    $('thead tr th').each( function(e) {

var thIndex = $(this).index();
var headerText = $(this).html();
console.log("Header " + headerText);

$(`table tbody tr`).each(function(){

    $(this).find("td").eq(thIndex).prepend("<span>" + headerText + "</span>");
});
});
    span {
color: red;
font-weight: 700
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table>
 <thead>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  </thead>
  <tbody>
    
 
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr> 
  </tbody>
</table>
    Login or Signup to reply.
  3. 0 
    $(document).ready(function() {
    const headers = $('table thead th').map(function() {
        return $(this).text();
    }).get();

    $('table tbody tr').each(function() {
        $(this).find('td').each(function(index) {
            const headerText = headers[index];
            $(this).html("<span>" + headerText + "</span>" + $(this).text());
        });
    });
});
      span {
            color: red;
            font-weight: 700;
        }
    <table>
    <thead>
        <tr>
            <th>Company</th>
            <th>Contact</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alfreds Futterkiste</td>
            <td>Maria Anders</td>
            <td>Germany</td>
        </tr>
        <tr>
            <td>Centro comercial Moctezuma</td>
            <td>Francisco Chang</td>
            <td>Mexico</td>
        </tr> 
    </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search