[jQuery] td elemant에 문자열을 치환하도록 하라./이름을 마우스 클릭하면 alert창에 이름이 출력되도록 하라

td elemant에 문자열을 치환하도록 하라.

이름을 마우스 클릭하면 alert창에 이름이 출력되도록 하라

<button type="button" id="mbtn">남자부</button>
<button type="button" id="wbtn">여자부</button>

<table border="1">
<tr>
	<th></th><th>성명</th><th>시간</th>
</tr>
<tr>
	<th>우승</th><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 src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
let womam = [
	["", ""],
	["성춘향", "01:06:11"],
	["향단이", "01:07:25"],
	["심청이", "01:08:34"]
];

let man = [ 
	["", ""],
	["김철수", "01:06:11"],
	["일지매", "01:06:12"],
	["홍길동", "01:06:15"]
];

$(document).ready(function() {
	$("#mbtn").click(function() {
		for(i=0;i<man.length; i++){
			for(j=0; j<man[i].length; j++){
				$("tr:eq(" + i + ") td:eq(" + j + ")").html(man[i][j]);
			}
		}
	}); // 
	
	$("#wbtn").click(function() {
		
		for(i=0;i<man.length; i++){
			for(j=0; j<man[i].length; j++){
				$("tr:eq(" + i + ") td:eq(" + j + ")").html(womam[i][j]);
			}
		}
	});
	
	$("td").click(function () {
		let val = $(this).text();
		alert(val);
	});	
});
</script>

 

설명

td태그의 값을 빈 값으로 설정해주고, sacrip안에서 배열을 선언해준다. 각 버튼을 눌렀을 때 그에 맞는 값이 들어가도록 이중 for문을 사용한다.

$("tr:eq(" + i + ") td:eq(" + j + ")").html(man[i][j])

예를 들어 i=1, j=0일 경우 ("tr:eq(1) td:eq(0)").html(man[1][0]) : tr태그 1번지(index) 안의 td태그 0번지에 man[1][0](==김철수)의 값이 들어간다. 

 

클릭 시 td태그의 this(td태그에서 클릭을 당한 요소)의 text를 경고장에 출력된다.