CSS의 특정 텍스트를 바꾸는 방법은 무엇입니까?

Question

테이블이 있는데 "1"을 "X"로, "0"을 ""로 바꿉니다. CSS로 가능합니까?

<table> 
    <tr> 
     <td>1</td> 
     <td>0</td> 
    </tr> 
</table> 

Answer 1

이것은 jQuery의 작업처럼 들립니다.

HTML

<table> 
    <tr> 
     <td>1</td> 
     <td>0</td> 
    </tr> 
</table> 

jQuery를

$('td').each(function(){ 
    if ($(this).text() == '1') { $(this).text('X'); } 
    if ($(this).text() == '0') { $(this).text(''); } 
}); 

Answer 2

당신은 단지 CSS

td:first-child:after 
{ 
    content:"X"; 
} 
td:first-child + td:after 
{ 
    content:""; 
} 

를 사용하지만이의 정확한 동작을 하시겠습니까 있다면 당신은이 작업을 수행 할 수 일하면 빈 열이 있어야합니다.

<table> 
    <tr> 
     <td></td> 
     <td></td> 
    </tr> 
</table> 

EDIT : html이 질문에 보이는 것처럼 간단하다면 위의 방법을 사용하지만 html이 더 동적 인 경우 & 예측할 수 없지만 분명히 javascript를 선택해야합니다./jQuery 접근 방식.

Answer 3

당신이 (DEMO) 같은 것을 할 수있는 :

td { 
    font-size:0; 
} 

td:first-child:after { 
    content: "X"; 
    font-size: 14px; 
} 

을하지만 추한 이잖아 나는 개인적으로 이러한 작업을 위해 자바 스크립트를 선호합니다. 따라서이 솔루션을 사용하지 마십시오. 그것은 단지 그런 일을하는 CSS의 임무가 아닙니다.

var tds = document.getElementsByTagName('td'); 

for(var i = 0; tds[i]; i++) { 
    if(tds[i].innerHTML == '1') tds[i].innerHTML = 'X'; 
    if(tds[i].innerHTML == '0') tds[i].innerHTML = ''; 
} 

Answer 4

당신은 어떤 visibility, after 및 content

으로이 작업을 수행 할 수 있습니다

$('td:contains("1")').text('X'); 
$('td:contains("0")').text(''); 

와하지를 일반 자바 스크립트 잊지 :이처럼 쉬울 것이다 jQuery를에

DEMO http://jsfiddle.net/kevinPHPkevin/hJyd8/

td:nth-child(1) { 
visibility: hidden; 
} 
td:nth-child(1):after { 
    content:"2"; 
    visibility:visible; 
} 
td:nth-child(2) { 
visibility: hidden; 
} 
td:nth-child(2):after { 
    content:"''"; 
    visibility:visible; 
}