자바스크립트 테이블 생성 질문이요 ㅠ (형님들께 큰절 한번 하고 여쭙습니다)

Question

CSS는 포기했고 Reservation detail에 벨류 뜨는것 까지는 만들었습니다. 1.버튼 클릭해서 나오는 테이블을 innerHTML 을 사용하지 말고 만들어야 된데요...(JQUERY도 말구요)createElement 랑 textcontext insertcell 같은걸 조합해서 만드는것 같은데요 ㅜ 도무지 손을 못되겠네요... 어떻게 해야 할까요? 2.첫번째 클릭엔 전체 테이블을 다 만들고 두번째 부터 벨류가 착착 들어가는데.....json형식으로 저장된 데이터가 insertCell로 들어가는 건가요? ㅠㅠ 형님들 도와주십쇼ㅠ

json is ok · Accepted Answer

createElement 랑 textcontext insertcell 조합이라면 이정도 되겠네요

초보자1212 · Answer

이미 저보다 css 잘하시는거같습니다이쁜데요 ㅋ

풍풍맨 · Answer

예시는 제가 만든게 아니라 교수님이 이렇게 하라고 예를 들어 주신거에요 ㅠ

풍풍맨 · Answer

저...jason not json 님이 말씀해 주신걸로 버튼 누르면 표가 나타나게는 했는데요..위의 유저가 저장한 벨류를 어떻게 한줄씩 차례대로 넣나요? function drawTableHead() { var table &#61; document.getElementById('reservationTable');var row &#61; table.insertRow(0);var cell1 &#61; row.insertCell(0);var cell2 &#61; row.insertCell(1); cell1.textContent &#61; &#34;Name&#34;;cell2.textContent &#61; &#34;Phone Number&#34;; 이런식으로 Name , Phone Number 의 목차를 만들수 있지만 그뒤로 Name phone NumberRyu 00000000 이런식으로 벨류가 들어가야 되거든요.....

json is ok · Answer

전에 보내드린 코드를 잘 이해를 못하신듯하네요 그 코드를 보면 동적인 데이터는 데이터의 크기를 보고 루프를 돌려서 테이블의 셀을 만들고 데이터를 입력합니다.그러니 html 코드를 문자열로 성생하여 inertHtml로 처리했던 부분을 insertRow와 insertCell 그리고 데이터를 넣었던 부분은 tesxContent 치환하면 됩니다.관련 코드를 간단히 아래와 같습니다.코드를 가져와서 쓰실때는 가능한한 코드가 어떻게 동작하는지 다 이해를 하시는 것을 추천해드립니다.이해를 못한 코드를 적용했을 경우 변경사항이 생기면 수정도 못하고 더 미궁에 빠질 가능성이 커집니다.var data &#61; [{&#34;name&#34;:&#34;Ryo&#34;, &#34;PhoneNumber&#34;:&#34;000-0000-000&#34;},{&#34;name&#34;:&#34;Ken&#34;, &#34;PhoneNumber&#34;:&#34;000-0000-000&#34;}]; function myFunction() { var table &#61; document.getElementById(&#34;myTable&#34;); var header &#61; table.createTHead(); var hrow &#61; header.insertRow(0); hrow.insertCell(0).textContent &#61;&#34;Name&#34;; hrow.insertCell(1).textContent &#61;&#34;Phone Number&#34;; for (var i &#61; 0; i < data.length; i&#43;&#43;) { var row &#61; table.insertRow(i&#43;1); row.insertCell(0).textContent &#61; data[i].name row.insertCell(1).textContent &#61; data[i].PhoneNumber } }

자바스크립트 테이블 생성 질문이요 ㅠ (형님들께 큰절 한번 하고 여쭙습니다)

5개의 답변

Q&A 목록