JavaScript 동적 생 성 표 의 예제
3006 단어 JavaScript표.
HTML 탭 은 한 줄 의 헤더 만 씁 니 다.
JS 를 통 해 동적 표를 작성 합 니 다.(몇 개의 데이터 가 있 으 면 자동 으로 몇 줄 의 표를 만 듭 니 다)
학습 과 시연 을 위해 서 는 배경 데 이 터 를 호출 하지 않 고 고정된 데 이 터 를 사용 합 니 다.
코드 구현:
HTML 내용:
<table cellspacing="0">
<thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</thead>
<tbody></tbody>
</table>
CSS 내용:
table {
width: 500px;
margin: 100px auto;
border-collapse: collapse;
text-align: center;
}
td,
th {
border: 1px solid #333;
}
thead tr {
height: 40px;
background-color: #ccc;
}
JS 내용:
// 1. , ,
var datas = [{
name: ' ',
subject: 'JavaScript',
score: 100
}, {
name: ' ',
subject: 'JavaScript',
score: 98
}, {
name: ' ',
subject: 'JavaScript',
score: 99
}, {
name: ' ',
subject: 'JavaScript',
score: 88
}, {
name: ' ',
subject: 'JavaScript',
score: 0
}];
// 2. tbody : ( )
var tbody = document.querySelector('tbody');
for (var i = 0; i < datas.length; i++) { // for tr
// 1. tr
var tr = document.createElement('tr');
tbody.appendChild(tr);
// 2. ( 3 ) td for datas[i]
for (var k in datas[i]) { // for td
//
var td = document.createElement('td');
// datas[i][k] td
// console.log(datas[i][k]);
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
// 3. 2
var td = document.createElement('td');
td.innerHTML = '<a href="javascript:;" rel="external nofollow" > </a>';
tr.appendChild(td);
}
// 4.
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function() {
// a a (a ) node.removeChild(child)
tbody.removeChild(this.parentNode.parentNode)
}
}
// for(var k in obj) {
// k
// obj[k]
// }
구현 효과:삭제 단 추 를 누 르 면 해당 길드 가 삭 제 됩 니 다.
"장삼"의 데 이 터 를 삭제 하려 면 누 르 십시오:
이상 은 JavaScript 동적 생 성 표 의 예제 에 대한 상세 한 내용 입 니 다.JavaScript 생 성 표 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.