请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

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

 
下面案例将教大家如何使用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>








回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。