[Javascript] jQuery로 테이블 셀 배경색을 변경하는 방법

요새 Flask를 이용해서 웹서버를 구축하고 데이터를 시각화 하기 위한 웹 사이트를 개발하고 있는데 대학생 때 이후로 웹을 건드려 본 적이 없어서 작업 하면서 배운 것들을 작성할 예정이다.

우선 판다스 데이터 프레임을 html에 렌더링을 하는데에는 어렵지 않았다.

css를 만들어줬고, dataframe에 to_html 함수를 이용해서 페이지에 렌더링 해주었다.

(main.py)

# df 만들었다고 가정
df = pd.DataFrame(----)

df_html = [df.to_html(classes='mystyle', header='true', index=False)]


data = {'data': df_html}

flask에서 제공하는 render_template 함수를 이용해서 html로 쏴주면 된다.

return render_template("index.html", data = data)

(index.html)

<div>
	{{ data.df_html }}
</div>

이렇게 되면 바로 화면에 테이블이 나오게 되는데

테이블의 셀은 css에 맞게 설정이 되겠지만 특정 조건에 맞게 색상을 변경 해주고 싶었다.

예를 들면 테이블이 아래와 같다고 할 때

"딸기"라는 텍스트를 가진 셀의 배경색을 빨간색으로 변경하고 싶었다.

<table>
	<tr>
    	<td>수박</td>
        <td>배</td>
    </tr>
    <tr>
    	<td>사과</td>
        <td>딸기</td>
    </tr>
</table>

이미 테이블이 html에 나와있기 때문에 jQuery로 배경색을 바꿔줄 수 있었다.

<script>
	funtion refresh(){
		$("td:contains('딸기')").css('background-color','red')
        }
</script>

css로 했다면 .css가 아닌 .addClass로 세팅해줄 수 있다.

우키독스