반응형
결과
실물
html
객체
function MyDataa(mkey,mtitle,mvalue){
this.key = mkey
this.title = mtitle
this.value = mvalue
}
더미데이터
var mmList = [
new MyDataa('key1','제목1','values1'),
new MyDataa('key2','제목2','valueqs'),
new MyDataa('key3','제목w 3','valuest'),
new MyDataa('key4','제목4','valu123 es'),
new MyDataa('key5','제목5','valuaa es'),
new MyDataa('key6','제목6','valu des'),
new MyDataa('key7','제목7',['m1','m2','m3']),
new MyDataa('key8','제목8','valuasdes')
]
테이블만들기
//@param stringSelector: #example , listData: [MyDataa,MyDataa,.. ]
function makeTable(stringSelector ,listData){
var d = document.querySelector(stringSelector)
while (d.firstChild) {
d.removeChild(d.firstChild);
}
var colnum = 4;
var tbl = document.createElement('table');
tbl.setAttribute('text-align', 'center')
tbl.style.width = '100%'
tbl.border = 1
var colgroup = document.createElement('colgroup')
var tbody = document.createElement('tbody')
for (var i = 0; i<colnum; i++){
var col = document.createElement('col')
col.attributes.width = '25%'
colgroup.appendChild(col)
}
var tr = document.createElement('tr')
listData.forEach(function(e,i){
var tTD = document.createElement('td')
tTD.appendChild(document.createTextNode(e.title))
var vTD = document.createElement('td')
if (Array.isArray(e.value)){
var ultag = document.createElement('ul')
e.value.forEach((arrayValue)=>{
var litag = document.createElement('li')
litag.appendChild(document.createTextNode(arrayValue))
ultag.appendChild(litag)
})
vTD.appendChild(ultag)
} else {
vTD.appendChild(document.createTextNode(e.value))
}
tr.appendChild(tTD)
tr.appendChild(vTD)
if (e.key === 'key7'||e.key === 'key8'){
vTD.setAttribute('colSpan', '3')
tbody.appendChild(tr)
tr = document.createElement('tr')
} else {
if(i%2 != 0){
tbody.appendChild(tr)
tr = document.createElement('tr')
}
}
})
tbl.appendChild(colgroup)
tbl.appendChild(tbody)
d.appendChild(tbl)
}- value 값의 object type에 따라 list 타입이면 ul ,li 수직으로 표현함.
사용
<body>
<div id="showme"></div>
</body>
makeTable('#showme',mmList);반응형
'JAVASCRIPT' 카테고리의 다른 글
| (js) 파일 업로드 , 다운로드 (0) | 2023.01.10 |
|---|---|
| (javascript)상속 (0) | 2022.06.27 |
| (javascript)이스케이프 문자열 치환 (0) | 2022.05.12 |
| (js) 자바스크립트 기초 - HTMLCollection , NodeList (0) | 2022.04.03 |
| (JS) 자바스크립트 기초 - heap,stack,webApi,callback queue, event loop (0) | 2022.03.31 |