jquery table td에 값 할당하기

조회수 50회

안녕하세요 현재 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>

답변을 하려면 로그인이 필요합니다.

Hashcode는 개발자들을 위한 무료 QnA 사이트입니다. 계정을 생성하셔야만 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 계정을 생성하셔야만 글을 작성하실 수 있습니다.