一、需要掌握的知识
- HTML表格相关知识
- css样式基本设置
- 简单数组的书写
- 添加,删除,创建
- for循环的知识!important
二、思路
1.阐述
首先先写html骨架,css样式,先是创建行,在创建列,同时把值赋予给单元格,最后一个单元格创建删除键,最后就是删除操作,数据在js里,不在数据库
代码如下(示例):
<style>
table{
width: 500px;
border-collapse: collapse;
text-align: center;
margin: 20px 20px;
}
tr th{
height:50px;
line-height: 50px;
border: 1px solid red;
background-color: blue;
}
tr td{
border: 1px solid red;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>学科</th>
<th>成绩</th>
<th>按钮</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var datas=[
{
name:'张三',
subject:'计算机操作系统',
score:100
},
{
name:'李四',
subject:'计算机网络',
score:99
},
{
name:'王五',
subject:'数据结构',
score:98
},
{
name:'王二麻',
subject:'高数',
score:100
}
]
var tbd=document.querySelector('tbody');
for(var i=0;i<datas.length;i++){
var tr=document.createElement('tr');
tbd.appendChild(tr);
for(var k in datas[i]){
var td=document.createElement('td');
td.innerHTML=datas[i][k];
tr.appendChild(td);
}
var td=document.createElement('td');
td.innerHTML='<a href="javascript:;">删除</a>';
tr.appendChild(td);
}
var ass=document.querySelectorAll('a');
for(var i=0;i<ass.length;i++){
ass[i].onclick=function(){
tbd.removeChild(this.parentNode.parentNode);
}
}
</script>
2.运行结果
总结
温故而知新,敲代码会一层更上一层楼哦