728x90
1. 테이블에서 특정행에 class 추가:
테이블에서 수많은 행에 특정한 행에만 조건적으로 CSS를 적용 하기 위한 방법 으로 칼럼에 조건 문자가 포함되어 있을 경우 class 이름에 문자를 추가하는 방식
(예를 들어 칼럼에 'OO합계' 라는 글자가 있을경우 기존 클래스 명 'area'로 넣이고 '총계'일 경우 'tot'를 넣어줌)
2. CSS에는 조건에 따라 붙여질 class 명으로 만든 2개의 아이템 존재 .area{background-color:black} /.tot{background-color:blue}
3. 해당 코드:
<html>
<tr class="color-changer" th:each="chart : ${googleChartOption}" th:classappend=" ( ${chart.cd_nm.contains('합계')} == true ? area : '' ) + (${chart.cd_nm} == '총계' ? tot : '' )"><CSS>
.area{
background-color:green;
}
.tot{
background-color:blue;
}<!DOCTYPE HTML>
<html xmlns:th="http://thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<Style>
table{
margin-left:auto;
margin-right:auto;
border:1px solid
text-align:center;
font-size:30px;
width:90%;
}
th{
background:gray;
border:1px solid;
margin:1px;
padding:1px;
text-align:center;
}
td{
border:1px solid;
margin:1px;
text-align:center;
font-size:13px;
}
h1{
padding:2px;
margin:5px;
text-align:center;
}
.area_input{
width:40px;
height:30px;
}
.searchButton{
text-align:right center;
width:80px;
height:60px;
font-size:30px;
font-weight:200px;
}
__div{
border: 1px solid blue;
}
#container{
padding:1px;
text-align:left;
margin:auto;
display:grid;
grid-template-columns: 1fr 3fr 2fr 1fr
}
#sector1{
padding:1px;
text-align:center;
margin:auto;
width:30px;
height:20px;
}
.area{
background-color:green;
}
.tot{
background-color:blue;
}
</Style>
<body>
<h1>GoogleChart</h1>
<br><hr>
<form action="chart" th:action method="post">
<div id="container">
<div id="sector1">
<select name="area_cd">
<option value="00" name="area_cd">전체</option>
<option value="10" name="area_cd">서울</option>
<option value="20" name="area_cd">경기</option>
<option value="30" name="area_cd">원주</option>
<option value="40" name="area_cd">평택</option>
<option value="50" name="area_cd">울산</option>
<option value="60" name="area_cd">대전</option>
<option value="70" name="area_cd">부산</option>
<option value="80" name="area_cd">광주</option>
<option value="90" name="area_cd">파주</option>
</select>
</div>
<div id="sector2">
<div>
<label>DATA</label>
<input type="radio" name="filter" th:value="D"/>
<label>중간총계</label>
<input type="radio" name="filter" th:value="M" />
<label>총계</label>
<input type="radio" name="filter" th:value="T"/>
<label>전체</label>
<input type="radio" name="filter" th:value="A" checked="checked"/><br>
</div>
<div>
<label >서울</label>
<input type="int" id="nm10" class="area_input" name="nm10" value="1"/>
<label>경기</label>
<input type="int" id="nm20" class="area_input" name="nm20" value="2"/>
<label>원주</label>
<input type="int" id="nm30" class="area_input" name="nm30" value="3"/>
<label>평택</label>
<input type="int" id="nm40" class="area_input" name="nm40" value="4"/>
<label>울산</label>
<input type="int" id="nm50" class="area_input" name="nm50" value="5"/><br><br>
<label>대전</label>
<input type="int" id="nm60" class="area_input" name="nm60" value="6"/>
<label>부산</label>
<input type="int" id="nm70" class="area_input" name="nm70" value="7"/>
<label>광주</label>
<input type="int" id="nm80" class="area_input" name="nm80" value="8"/>
<label>파주</label>
<input type="int" id="nm90" class="area_input" name="nm90"value="9"/>
</div>
</div>
<div id="sector3">
<div>
<label>DATA우선</label>
<input type="radio" name="arg_dir" th:value="D" checked="checked"/><br>
<label>합계우선</label>
<input type="radio" name="arg_dir" th:value="T"/><br>
</div>
<div>
<label>건수</label>
<input type="number" name="v_cnt" th:value="1000000"/>
</div>
</div>
<div id="sector4">
<button id="searchButton" class="searchButton" type="submit">검색</button>
</div>
</div>
</form>
<br><hr>
<table id="googleChartOption">
<thead>
<tr>
<th >AREA_CD</th>
<th>REGION_AREA</th>
<th>C0</th>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
<th>C5</th>
<th>C6</th>
<th>C7</th>
<th>C8</th>
<th>C9</th>
<th>TOT</th>
</tr>
</thead>
<tbody>
<!-- <tr th:each="google : ${googleList}" class="base" th:classappend=" ( ${chart.cd_nm.contains('합계')} == true ? area : '' ) + (${chart.cd_nm} == '총계' ? tot : '' )" > -->
<tr class="color-changer" th:each="chart : ${googleChartOption}" th:classappend=" ( ${chart.cd_nm.contains('합계')} == true ? area : '' ) + (${chart.cd_nm} == '총계' ? tot : '' )">
<td id="area_cd_" class="area_cd_" th:text="${chart.cd_nm}">AREA_CD</td>
<td th:text="${chart.region_area}">REGION_AREA</td>
<td th:text="${chart.c0}">C0</td>
<td th:text="${chart.c1}">C1</td>
<td th:text="${chart.c2}">C2</td>
<td th:text="${chart.c3}">C3</td>
<td th:text="${chart.c4}">C4</td>
<td th:text="${chart.c5}">C5</td>
<td th:text="${chart.c6}">C6</td>
<td th:text="${chart.c7}">C7</td>
<td th:text="${chart.c8}">C8</td>
<td th:text="${chart.c9}">C9</td>
<td th:text="${chart.tot}">TOT</td>
</tr>
</tbody>
</table>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$('.color-changer').each(function(){
if( $(this).find("#AREA_CD").text() == "서울합계"){
$(this).css('background-color',green);
}
else{
$(this).css('background-color',black);
}
});
</script>
</body>
</html>
728x90
'SpringBoot' 카테고리의 다른 글
| [SpringBoot]스프링부트 pom.xml 에 Dependencies 다운 안될 때(intelliJ) (0) | 2022.09.07 |
|---|---|
| [SpringBoot]스프링부트 프로젝트 초기생성 (0) | 2022.09.07 |
| ThymeLeaf 기본 문법 (0) | 2022.04.10 |
| [SpringBoot]템플릿과 컨트롤러 이동흐름 이해 (0) | 2022.04.05 |
| [Gradle project]Import 방법 (0) | 2022.04.04 |
댓글