<!-- 案例:自动生成表格 -->
<table>
<thead>
<tr>
<th>Name</th>
<th>Subject</th>
<th>Score</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
//1. 模拟数据,用一个包含多个对象的数组来存储数据
var datas = [
{
dName:'Jim',
subject:'JS',
score:80
},
{
dName:'LiLei',
subject:'JS',
score:100
},
{
dName:'HanMeimei',
subject:'JS',
score:59
},
];
//2. 生成前三列数据
var tbody = document.querySelector("tbody");
//console.dir(tbody);
for(i=0; i<datas.length; i++){
//(1) 生成行
var tr = document.createElement("tr");
tbody.appendChild(tr);
//(2) 生成列
for(k in datas[i]){
var td = document.createElement('td');
td.innerText = datas[i][k]
tr.appendChild(td);
}
//3. 生成删除链接
var del = document.createElement('td');
del.innerHTML = '<a href="javascript:;">删除</a>';
tr.appendChild(del);
}
//4. 实现删除功能
var dels = document.getElementsByTagName('a'); //(1)获取所有链接
for(i=0; i<dels.length; i++){
dels[i].onclick = function(){ //(2)绑定删除事件
tbody.removeChild(this.parentNode.parentNode);
}
}
</script>
案例:自动生成表格
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。