자바스크립트나 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로 구성되어있긴 합니다 ㅠㅠ
$arr 에 값을 할당하면 될것 같은데
자세한 구조는 모르니
응용하시면 될것 같습니다.
그러면 그냥 js 로 처리하는게 나을수도 있겠네요
js로 참고할 수 있는 자료가 있을까요 ㅠㅠ?
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의 리스트를 찍어내는것까진 했는데, 그 이후가 어렵네요 ㅠ