追加JQueryを使用して各テーブルヘッダー（th）にテキストを追加します。

Question

それぞれの内側にいくつか追加することを追加しようとしています。表のヘッダが生成される動的には、ここで私が持っているものだデータベース列

に依存している：

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

はreadyイベントにはjQueryを使用してを期待するものです。

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

この各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

あなたはappendjqueryのメソッドを使用する必要があります。

また、thDOMの要素を取得するには、findメソッドを使用します。

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

これを試してみてください：

$(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">'); 
});