javascript 동적 테이블 생성

Question

안녕하세요 선배님들 개인적으로 프로젝트를 하다가 궁금한 것이 있습니다 ajax 로 비동기 통신을 해서 데이터를 가지고 오면 (key - value 형태) 그 내용을 바탕으로 테이블을 만들어야 합니다 찾아 보니 for 문을 이용해서 동적으로 생성하는 방법이 있어서 직접 사용을 해보았습니다 function appendGrid(data){ let html = ""; for(key in data){ html +=""; html +=""; html +=data[key].id; html +=""; html +=""; html +=data[key].email; html +=""; html +=""; if(data[key].enabled == 0){ html +='비활성'; }else{ html +='활성'; } html +=""; html +=""; html +=data[key].nickname; html +=""; html +=""; html +=data[key].lockCnt; html +=""; html +=""; html += ""; html +=""; html +=""; html +=data[key].registerDate; html +=""; html +=""; html +=data[key].updateDate; html +=""; html +=""; html +="" html +=""; html +=""; html +=""; html +=""; html +=""; } $(".table-striped tbody").empty(); $(".table-striped tbody").append(html); }이런 형식으로 만들었는데 이렇게 만드는 것이 맞는 방법인가요? 좀더 효율적인 방법으로 테이블을 동적으로 생성하는 방법을 찾고 있어서 그렇습니다 선배님들 조언 부탁드리겠습니다

leeJB · Accepted Answer

document를 사용하시면 될 것 같습니다.//출처 : https://developer.mozilla.org/ko/docs/Web/API/Document/createElementdocument.body.onload &#61; addElement; function addElement () { // create a new div element var newDiv &#61; document.createElement(&#34;div&#34;); // and give it some content var newContent &#61; document.createTextNode(&#34;환영합니다!&#34;); // add the text node to the newly created div newDiv.appendChild(newContent); // add the newly created element and its content into the DOM var currentDiv &#61; document.getElementById(&#34;div1&#34;); document.body.insertBefore(newDiv, currentDiv); } //table 생성//출처 : https://stackoverflow.com/questions/14643617/create-table-using-javascriptfunction tableCreate() { var body &#61; document.getElementsByTagName('body')[0]; var tbl &#61; document.createElement('table'); tbl.style.width &#61; '100%'; tbl.setAttribute('border', '1'); var tbdy &#61; document.createElement('tbody'); for (var i &#61; 0; i < 3; i&#43;&#43;) { var tr &#61; document.createElement('tr'); for (var j &#61; 0; j < 2; j&#43;&#43;) { if (i &#61;&#61; 2 && j &#61;&#61; 1) { break } else { var td &#61; document.createElement('td'); td.appendChild(document.createTextNode('\u0020')) i &#61;&#61; 1 && j &#61;&#61; 1 ? td.setAttribute('rowSpan', '2') : null; tr.appendChild(td) } } tbdy.appendChild(tr); } tbl.appendChild(tbdy); body.appendChild(tbl) } tableCreate();어느정도 번거러운 코딩이 필요하지만 저렇게 문자열로 하지는 않으셔도 될 겁니다.

leeJB · Answer

추가적으로 에서 'button'이 tagName, 'type'이 attribute, '계정 비활성화'가 element의 textContent입니다. let element = document.createElement('button'); element.textContent = '계정 비활성화'; element.setAttribute('type', 'button');위에 코드는 그냥 손코딩 한거라 잘될지는 모르겠지만 크게는 다르지 않을 겁니다.

하루의_spring · Answer

&#64;leeJB 감사합니다 한번 활용해 보겠습니다

javascript 동적 테이블 생성

3개의 답변

#javasc 목록