본문 바로가기

프로그래밍/jQuery

db 데이터를 받아와 테이블에 데이터 입력_외부 css 사용

style css적용 화면 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Insert title here</title>
</head>
<body>

<h1>수영시합</h1>
<button type="button" id="woman">여성부</button>
<button type="button" id="man">남성부</button>
<br><br>

<table border="1" id="result">
<tr>   <!-- 0 -->
   <th>title</th>
   <th>name</th>
   <th>time</th>
</tr>
<tr>   <!--  1 -->
   <th>우승</th>   <!-- 0 -->
   <td></td>
   <td></td>
</tr>

<tr>
   <th>2위</th>
   <td></td>
   <td></td>
</tr>
<tr>
   <th>3위</th>
   <td></td>
   <td></td>
</tr>


</table>

<script type="text/javascript">
   //file read
var woman = [
	
	["",""],
	["김영희","01:06:11"],
	["이수빈","01:07:23"],
	["박진희","01:12:34"],

];
   
var man = [
	
	["",""],
	["홍길동","01:07:55"],
	["일지매","01:05:23"],
	["정수동","01:15:34"],

];
   
$(function (){
	
	//  $("tr:even").css("background-color","#00ff00"); //1칸씩 띄워서 들어가는것.
	
//	$("tr:eq(1) td:eq(0)").html("데이터");
//	$("tr:eq(1) td:eq(1)").html("데이터1");

    $("#woman").click(function(){
    	for(i = 0; i < 4; i++){
    		for(j = 0; j <2; j++){
    			$("tr:eq("+i+") td:eq("+j+")").html(woman[i][j]);
    		}
    	}
    });
    
    $("#man").click(function(){
    	for(i = 0; i < 4; i++){
    		for(j = 0; j <2; j++){
    			$("tr:eq("+i+") td:eq("+j+")").html(man[i][j]);
    		}
    	}
    });
	
    $("td").mouseover(function(){
    	/* $(this).css("background-color", "#ffff00"); //노랑
    	$(this).css("color","#000000"); */
    	$(this).css({"background-color":"#ffff00", "color":"#000000"}); //jason
    });
    $("td").mouseout(function(){
    	$(this).css("background-color", "#666666"); //회색
    	$(this).css("color","#ffffff");
    });
    
    
    
});   
   
   
   

</script>



</body>
</html>

 

★ 적용된 style.css

body{
  background-color: #666666;
  color: #FFFFFF;
  margin :30px;
}

h1{
  font: bold 2em sans-serif;
}

table{
  border-collapse: collapse;
  margin: 20px 0px;
}

th{
  text-align:center;
  background-color: #669966;
  padding:5px 10px;
  border: solid 1px #CCCCCC;
}

td{
  text-align:left;
  padding:5px 20px;
  border: solid 1px #CCCCCC;
}