커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
자바스크립트에서 html 위치 찾아 적어주는게 헷갈리네요
undefined주차
김*수
댓글
1
・
추천
0
・
조회수
8
조회수
8
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
자바스크립트에서 html 위치 찾아 적어주는게 헷갈리네요
왼쪽이 html파일이고 오른쪽이 자바스크립트인데
find에서 html의 class명이 name, addr, price, person favCnt 찾아서 값을 넣어주고 싶은데
이 부분을 어떻게 적여야 할까요
현재 화면에 $copy.html(imgPath+":"+name+":"+addr+":"+price+":"+person+":"+favCnt) 이부분은 출력이 되고 있습니다
작성한 코드 및 에러 메세지
오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.
Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!
<body>
<div id="wrap">
<div id="header-wrap">
<div class="header-container">header</header></div>
</div>
<div id="nav-wrap">
<div class="nav-container">
<nav>
<ul>
<li class='studycafe'>스터디카페</li>
</ul>
</nav>
</div>
</div>
<div id="banner-wrap">
<div class="banner-container">Banner</div>
</div>
<div id="content-wrap">
<div class="content-container">
<div class="studycafe">
<div class="searchgroup">
<form class="search">
<select id="searchBy">
<option value="1">주소</option>
<option value="2">카페이름</option>
</select>
<input type="text" name="srNameAddrName">
<select id="person" >
<option value="" disabled selected>인원 수</option>
<option value="3">3인 이상</option>
<option value="4">4인 이상</option>
<option value="5">5인 이상</option>
<option value="6">6인 이상</option>
<option value="7">7인 이상</option>
<option value="8">8인 이상</option>
<option value="9">9인 이상</option>
<option value="10">10인 이상</option>
</select>
<select id="orderBy">
<option value="1">가격 낮은순</option>
<option value="2">즐겨찾기 순</option>
</select>
<input type="button" value="검색" class="btn" style="width: 30px; height: 30px;"><br/>
</form>
</div>
<div class="studycafeList">
<table border="1">
<thead>
<tr>
<td colspan="3" class = "img">대표사진</td>
</tr>
<tr><td colspan="3" class="name">카페이름</td></tr>
<tr>
<td colspan="3" class="addr">주소</td>
</tr>
<tr><td class="price">가격</td><td class="person">최대인원</td><td class="favCnt">즐겨찾기수</td></tr>
</thead>
</table>
</div>
</div>
</div>
</div>
<div id="footer-wrap">
<div class="footer-container">ⓒ 2023 냠냠. All Rights Reserved.</div>
</div>
</div>
</body>
html body부분
$(()=>{
let url = backURL + 'studyroom/searchAll?orderBy=1'
$.ajax({
url : url,
method:"GET",
success:function(jsonObj){
console.log(jsonObj)
let $origin = $('div.content-container>div.studycafe>div.studycafeList').first()
let $parent = $origin.parent()
$(jsonObj).each((index,s)=>{
let imgPath=s.imgPath;
let name=s.name;
let addr=s.addr;
let price=s.price;
let person=s.person;
let favCnt=s.cnt
let $copy=$origin.clone()
$copy.html(imgPath+":"+name+":"+addr+":"+price+":"+person+":"+favCnt)
$copy.find('table>thead>tr>td.name').html(s.name)
$copy.find('table>thead>tr>td.addr').html(addr)
$copy.find('table>thead>tr>td.price').html(price + '원/시간')
$copy.find('table>thead>tr>td.person').html(person)
$copy.find('table>thead>tr>td.favCnt').html(favCnt)
$parent.append
})
}
})
})
댓글 알림
