js 혹은 jq 고수분들의 힘을 빌려보고싶습니다..
CMS/프레임워크 | 사용안함 |
---|---|
개발 언어 | 사용안함 |
문제 페이지 주소 | 비공개 (작성 후 5일 경과) |
값1 | 1 | 2 | 3 |
값2 | 4 | 5 | 6 |
합계 | 5 | 7 | 9 |
퍼센트율 | 95% | 85.1% | 12% |
공부하는 도중 쥐어짜내도 도저히 답이 안나와서 여쭤보고싶습니다..
html 페이지가 열리면 전체 td값들을 체크해서 자동으로 변환하는 방법이 궁금합니다.
1. 퍼센트율이 90% 미만일 경우 배경색상을 빨간색으로 처리방법
2. 퍼센트율이 NaN% 으로 표기될 경우 "-" 하이픈 처리로 변경방법
자비를 배풀어주실 선생님 구합니다.. ㅠㅠ
댓글 5
그리고 퍼센트는 위의 숫자랑 상관없는 건가봐요?
테스트는 안해보고 대충 머리속에서 돌려서 이렇게 하면 되지 않을까 하고 적어봅니다.
jquery를 사용해서 각 칸의 값을 가져옵니다.
선택자로 each를 돌리면 한꺼번에 가져올수 있겠죠.
가져온 값을 순서에 맞춰서 변수에 담아줍니다.
var tdvalue = new Array();//값을 담을 배열
$("table td").each(function(i, e){//each로 뱅글 뱅글
tdvalue[i] = Number($(this).text());//td안의 내용을 가져와서 숫자로 변환
});
이렇게 하면 tdvalue라는 배열안에 각 td의 값이 차곡 차곡 담기게 됩니다.
그럼 그 값을 가지고 후작업을 하면 됩니다.
for문으로 tdvalue를 돌리거나
(이렇게 하면 위의 each안에 다양한 변수를 ++해가면서 특정 숫자가 넘어가면 초기화시켜가면서 하는 것과 동일합니다. 굳이 for문을 돌릴 필요가 없군요.)
표가 고정된 갯수를 가진다면
tdvalue[숫자]의 값으로 내용을 가지고 조건문을 걸어서 class를 추가해주거나 style를 넣어주면 되겠군요.
표가 얼마나 자유롭게? 만들어지느냐에 따라 달라집니다.
또한 서버사이드언어를 사용할수 있다면 값이 노출되기 전에 먼저 체크가 가능하겠죠.
// 퍼센트율이 있는 TR 태그에 .percent 지정 필요
var $percent_td = $('tr.percent td');
$percent_td.each(function(){
var html = $(this).html();
// 값이 NaN% 인 경우
if(html == 'NaN%'){
$(this).html('-');
}
// 값이 90% 미만인 경우
else if(parseInt(html.replace('%', '')) < 90){
$(this).css('background', '#F00');
}
});
});
작성해둔 HTML 태그가 어떤지는 잘 모르겠지만...