jquery table td에 값 할당하기
조회수 2448회
안녕하세요 현재 html로 개발을 하고 있는 학생인데, 동적 테이블을 만들어서 버튼을 누르면 행 추가 및 삭제까지는 완료하였으나 어떤 행의 '검색'버튼을 누르면 주소 검색 팝업이 뜨고 그 중 주소를 선택하면 테이블의 해당 행의 2번째 열에 그 주소를 할당하려고 하나 그 방법을 모르겠네요... document.getElementById('sample6_address').value = addr 이 방법을 사용할때는 다른 행의 '검색'버튼을 눌러서 해도 첫번째 행의 주소만 계속 바뀝니다...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>어디서 뭐하지</title>
<link href="./css/infoc.css" rel="stylesheet">
</head>
<body>
<div class="img-wrapper">
<img class="img-responsive" src="./img/header-bg.jpg" alt="">
<div class="img-overlay">
<div class="meeting_info">
<label for="meeting">모임 이름:</label>
<input class="meeting" type="text" name='meeting' id="meeting" autofocus />
<label for="date">날짜:</label>
<input class="date" type="date" name="date" id="date" required="" />
</div>
<div class="attendent-info">
<table class="attendent_table" id="attendent_table" border-collapse="collapse" align="center">
<thead>
<th width="20%">이름</th>
<th width="70%">주소</th>
<tr>
<td><input type='text' name='name' placeholder='이름' size=7 /></td>
<td><input type='text' name='address' id='sample6_address' value='' size=40/></td>
<td><input type='button' class='search' value='검색' ></td>
</tr>
<tr>
<td><input type='text' name='name' placeholder='이름' size=7 /></td>
<td><input type='text' name='address' id='sample6_address' value='' size=40/></td>
<td><input type='button' class='search' value='검색' ></td>
</tr>
</thead>
<tbody id="attendent"></tbody>
</table>
</div>
<!-- jQuery와 Postcodify를 로딩한다 -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//d1p7wdleee1q2z.cloudfront.net/post/search.min.js"></script>
<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
var count = 2;
function person_add() {
if (count <= 8) {
var attendent = document.getElementById('attendent');
var row = attendent.insertRow(attendent.rows.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "<input type='text' name='name' placeholder='이름' size=7/>";
cell2.innerHTML = "<input type='text' name='address' id='sample6_address' value='' size=40/>";
//cell3.innerHTML = "<button id='postcodify_search_button' onclick='address_search()'>search</button>";
//cell3.innerHTML = "<input type='button' onclick='sample6_execDaumPostcode()' value='검색'><br>"
cell3.innerHTML = "<input type='button' class='search' value='검색'>";
//"검색" 단추를 누르면 팝업 레이어가 열리도록 설정한다
//$(function() {
// $("#postcodify_search_button").postcodifyPopUp();
//});
count += 1;
}
}
function person_remove() {
if (count > 2) {
var attendent = document.getElementById('attendent');
if (attendent.rows.length < 1) return;
attendent.deleteRow(attendent.rows.length - 1);
count -= 1;
}
}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" ;></script>
<script>
$('.attendent_table').on('click','.search',function() {
//var clickRow = $(this).closest("tr");
var search = $(this);
var tr = search.parent().parent();
var td = tr.children();
//alert(search.find("td").eq(1).html());
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 각 주소의 노출 규칙에 따라 주소를 조합한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var addr = ''; // 주소 변수
//사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
addr = data.roadAddress;
} else { // 사용자가 지번 주소를 선택했을 경우(J)
addr = data.jibunAddress;
}
td.eq(1).text() = addr;
//clickRow.find('td:eq(1)') = addr;
//document.getElementById('sample6_address').value = addr;
}
}).open();
})
</script>
<button class="btn-person_add" type="button" id="person_add" onclick="person_add()">
<img class="img_person_add" src="./img/person_add.png" width="50" height="50">
</button>
<button class="btn-person_remove" type="button" id="person_remove" onclick="person_remove();">
<img class="img_person_add" src="./img/person_remove.png" width="50" height="50">
</button>
<br />
<button class="btn" type="button" onclick="location.href='midmap'">
어디서
</button>
</div>
</div>
</body>
</html>
댓글 입력