추가 일부 JQuery를 사용하여 각 테이블 헤더 (th)에 일부 텍스트 추가

Question

각 th 내부에 일부를 추가하려고합니다. 표 헤더 생성 된 동적 여기에 내가 가지고있는 데이터베이스 열

에 의존한다 :

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

는 준비 이벤트에 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> 

이 각 목에 적용해야한다 ..

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