jquery를 사용하여 HTML 표 머리글 스타일링

Question

다음과 같은 표가 있습니다. 첫 번째 헤더 열에 만 배경색 (노란색)을 지정해야합니다. 또한 모든 텍스트 색상은 헤더에 파란색이어야합니다 (두 열 모두에 대해). jQuery를 사용하여 그것을 구현하는 방법은 무엇입니까?

참고 : jQuery를 배우려고합니다. 따라서 솔루션은 jQuery를 사용해야합니다.

<table id = "myTable"> 
     <thead> 
      <tr> 
       <th> 
        <a href="http://www.Lijo.com">Name</a> 
       </th> 
       <th> 
        Address 
       </th> 
      </tr> 
     </thead> 
     <tr> 
      <td> 
       Lijo 
      </td> 
      <td> 
       India 
      </td> 
     </tr> 
    </table> 

Answer 1

$("#myTable th:first").css({ 
    "background-color": "yellow" 
}); 
$("#myTable th").css({ 
    "color": "blue" 
});​ 

당신에게 스타일링하기 :

$("#myTable th") 
    .css({"color": "blue"}) 
    .filter(":first") 
    .css({"background-color": "yellow"});​ 

Answer 2

안녕 데모http://jsfiddle.net/r3jMv/1/ (업데이트) (구 =>)

여기에 블루 색상 http://jsfiddle.net/Zarhu/2/ : http://jsfiddle.net/r3jMv/6/ 코멘트 아래에서 또 다른 업데이트 된 버전 : http://jsfiddle.net/cC6hk/

트릭을해야 다음.

이 좋은 플레이 그라운드 수 있습니다 : http://vkanakaraj.wordpress.com/2009/06/18/select-a-column-of-a-table-using-jquery/

jQuery 코드

$(function(){ 
    // Change first column background color. 

    $("table thead tr th:first-child").css("background-color","#ff0000"); 
}); 

$("#myTable > thead > tr >th").css("background-color","yellow");​ 

HTML

<table id = "myTable"> 
     <thead> 
      <tr> 
       <th> 
        Name 
       </th> 
       <th> 
        Address 
       </th> 
      </tr> 
     </thead> 
     <tr> 
      <td> 
       Lijo 
      </td> 
      <td> 
       India 
      </td> 
     </tr> 
    </table> 
​ 

01

var firstColumnHeader = $('#myTable thead th:first-child'); 

을하고 그렇게처럼 css 방법을 사용하여 배경 색상을 업데이트 할 수 있습니다 : 23,516,

Answer 3

당신과 같이 첫 번째 헤더 열을 선택할 수 있습니다

다음

firstColumnHeader.css('background', '#FCD116'); 

는 jsfiddle demostration이다.

Answer 4

이것은 클래스 이름이 모든 스타일링을 수행해야하는 첫 번째 헤더 용입니다. 선택기는 #mytable 내부의 모든 "일"을 가져오고 EQ를 사용하여 (0) 클래스 이름이이 작업을 수행해야하는 모든 헤더의 클래스

$("#myTable th").eq(0).addClass("ClassName") 

이

을 처음 일을 가지고 그것에 추가 또한 한 줄에 동일한을 달성 할 수

$("#myTable th").addClass("ClassName2")