使用JS动态创建表格,数据自动填入

admin · 2022-10-27 11:12:16

下面案例将教大家如何使用JS动态的创建表格。
一、HTML文档结构
//CSS样式
<style>
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;
}
//结构代码
<body>
<table cellspacing="0">
< thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>

二、制作动态创建表格的JS代码：
<script>
//1.先去准备好学生的数据
var datas =[{
name :'魏瓔珞'，
subject: ' JavaScript'，
score: 100},
{
name: '弘历'，
subject: ' JavaScript'，
score: 98
},
{
name:'傅恒'，
subject: ' JavaScript'，
score: 99
name :明玉'
subject: ' JavaScript'，
score: 88
}];

// 2.往tbody 里面创建行:
有几个人(通过数组的长度)我们就创建几行
var tbody = document . querySelector( 'tbody' );
for (var i = 0; i < datas.length; i++) {
//创建tr行
var tr = document . createElement('tr' );
tbody . appendChild(tr);

//行里面创建单元格td单元格的数量取决于每个对象里面的属性个数 for循环遍历对象datas
for (var k in datas) { //里面的for循环管列td
//创建单元格
var td = document. createElement( 'td' );

//把对象里面的属性值datas[k] 给td
td. innerHTML = dafas[k];
tr. appendChild(td);
}// 3.创建有删除2个字的单元格
var td = document . createElement('td' );
td. innerHTML = '<a href="javascript:;">删除 </a>' ;
Itr . appendChild(td);

// 4.删除操作开始
var as = document . querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as.onclick = function() {
//点击a删除当前a所在的行(链接的爸爸的爸爸) node . removeChild(child)
tbody . removeChild(this . parentNode . parentNode )
}

</script>

		自动登录	找回密码
密码			立即注册

使用JS动态创建表格,数据自动填入

0 个回复

快速回复

admin

楼主热帖

相关帖子

标签云

艾Q网