Ajoute du texte à chaque en-tête de table (th) en utilisant JQuery

Question

J'essaie d'ajouter des append à l'intérieur de chaque th. tête de tableau est généré dynamique dépendent de la base de données Colonne

Voici ce que j'ai:

<table id="dynamic_id" class="table table-striped table-bordered"> 
    <thead> 
     <tr> 
      <th>Company Name</th> 
      <th>Email</th> 
      <th>Mobile</th> 
      <th>Address</th> 
     </tr> 

    </thead> 
    <tbody> 
     //body goes here 
    </tbody> 

    </tbody> 
</table> 

Qu'est-ce que Expect en utilisant jQuery Ready Event.

<th>Company Name 
      <span class="js-sorter-desc fa fa-chevron-down pull-right"></span> 
      <span class="js-sorter-asc fa fa-chevron-up pull-right"></span> 
</th> 

Cela devrait être appliquer sur chaque Th ..

<span class="js-sorter-desc fa fa-chevron-down pull-right"></span> 
<span class="js-sorter-asc fa fa-chevron-up pull-right"> 

Answer 1

Vous devez utiliser appendméthode jquery.

Aussi, utilisez la méthode find afin d'obtenir tous les thDOM éléments.

$('.table.table-striped').find('thead tr th').append('<span class="js-sorter-desc fa fa-chevron-down pull-right"></span><span class="js-sorter-asc fa fa-chevron-up pull-right"></span>'); 
 
console.log($('.table.table-striped').html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="dynamic_id" class="table table-striped table-bordered"> 
 
    <thead> 
 
     <tr> 
 
      <th>Company Name</th> 
 
      <th>Email</th> 
 
      <th>Mobile</th> 
 
      <th>Address</th> 
 
     </tr> 
 

 
    </thead> 
 
    <tbody> 
 
     //body goes here 
 
    </tbody> 
 
</table>

Answer 2

Essayez ceci:

$(document).ready(function(){ 
    $('table').find('th')append('<span class="js-sorter-desc fa fa-chevron-down pull-right"></span><span class="js-sorter-asc fa fa-chevron-up pull-right">'); 
});