자바스크립트나 php로 html로 작성된 테이블 중, 동일한 텍스트가 들어가있을 경우, 폰트색 변경

자바스크립트나 php로 html로 작성된 테이블 중, 동일한 텍스트가 들어가있을 경우, 폰트색 변경

QA

자바스크립트나 php로 html로 작성된 테이블 중, 동일한 텍스트가 들어가있을 경우, 폰트색 변경

본문

자바스크립트나 php로 html로 작성된 테이블 중, 동일한 텍스트가 들어가있을 경우, 폰트색을 변경하는 방법이 있을까요?

 

테이블 바디의 텍스트들은 

 

<td>첫번째 손님 31번</td>

<td>두번째 손님 32번</td>

<td>두번째 손님 32번</td>

<td>두번째 손님 32번</td>

 

이런식으로 되어있고,

text가 동일한 2번째 3번째 4번째의 기준으로 제일 밑에있는 건 그대로 내비두고,

2번째 3번째 td를 클래스나 스타일을주어 폰트만 색상을 변경하고 싶은데 가능한지 여쭤봅니다.

 

결과값 

 

첫번째 손님 31번

두번째 손님 32번

두번째 손님 32번

두번째 손님 32번

 

이련형태로 표현하려 합니다

이 질문에 댓글 쓰기 :

답변 2

css 로는 힘들것 같고

js 로는 가능하긴 한데 요소가 많아질 경우 전체 루프 재순회에 대한 부담이 있을것 같고

아웃풋을 내는 동시에 처리가 가능한 php 처리가 적당한것 같습니다.

 

루프에서 현재 자신요소와 자신의 바로 다음요소가 일치하냐만 체크하면 되겠네요

 


<style>.repeated { color: orange; }</style>
<?php
$out = '';
$out .= '<table border="1"><tr>';
$arr = [1,2,2,2,3,3,4,5,5,5,5,6,7,7];
for ($i = 0, $i_cnt = count($arr); $i < $i_cnt; $i++) {
    $repeated = '';
    if ($i < $i_cnt - 1 && $arr[$i] == $arr[$i + 1]) {
        $repeated = ' class="repeated"';
    }
    $out .= '<td' . $repeated . '>' . $arr[$i] . '</td>';
}
$out .= '</tr></table>';
echo $out;
?>

이미 테이블이 구성되어 있을 경우에, 데이터들을 배열로 불러와서 배열 처리하려면 어떻게 해야 할까요 ㅠㅠ?

<td>첫번째 손님 31번</td>

<td>두번째 손님 32번</td>

<td>두번째 손님 32번</td>

<td>두번째 손님 32번</td>

이런식으로 이미 html로 구성되어있긴 합니다 ㅠㅠ

jQuery 를 사용하는 예제 입니다.


<style>.repeated { color: orange; }</style>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function () {
    $('.tbl td').each(function (idx) {
        var txt = $(this);
        var txt_next = $(this).next();
        if (txt_next.length == 1 && txt.text() == txt_next.text()) {
            txt.addClass('repeated');
        }
    });
});
</script>
<?php
$out = ''; 
$out .= '<table border="1" class="tbl"><tr>';
$arr = [1,2,2,2,3,3,4,5,5,5,5,6,7,7];
for ($i = 0, $i_cnt = count($arr); $i < $i_cnt; $i++) {
    $repeated = ''; 
    //if ($i < $i_cnt - 1 && $arr[$i] == $arr[$i + 1]) {
    //    $repeated = ' class="repeated"';
    //} 
    $out .= '<td' . $repeated . '>' . $arr[$i] . '</td>';
}
$out .= '</tr></table>';
echo $out;
?>


for ($i = 0, $i_cnt = count($row1[CD]); $i < $i_cnt; $i++) {
    $repeated = ''; 
    if ($i < $i_cnt - 1 && $row1[CD][$i] == $row1[CD][$i + 1]) {
        $repeated = ' class="repeated"';
    } 
    
}
    
    $data[] = array(
        $check_html
        , "<td".$repeated.">(".$row1[CD].")</td>"
    );  



이런식으로하면 문법상 맞지 않는건가요?

가능하죠. 로직은 손을 봐야겠지만 그냥 단순히 생각하면

 

1. 전체 td를 탐색하여 안에 있는 텍스트를 감지

2. 감지한 텍스트 내에서 **번을 제외한 글자만 배열에 저장

3. 배열 전체를 돌면서 저장한 배열에 같은 텍스트가 있을 경우 해당 index에 맞는 td의 text에 color 입히기

 

const same1 = document.querySelectorAll("tbody tr td:nth-child(5)");

for (let i = 0; i < same1.length; i++) {
            console.log(same1[i].innerText);
        }

이런식으로 콘솔로 모든 td의 리스트를 찍어내는것까진 했는데, 그 이후가 어렵네요 ㅠ

답변을 작성하시기 전에 로그인 해주세요.
전체 153
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT