简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 运用js动态添加表格数据-2019年1月18日
Blogger Information
Blog 15
fans 0
comment 0
visits 10423
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
运用js动态添加表格数据-2019年1月18日
超超的博客
Original
604 people have browsed it
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>toList</title>
<style>
        table,th,td{
            border: 1px solid #666;
        }
        table {
            width: 500px;
            text-align: center;
            border-collapse: collapse;
        }
        table caption {
            font-size: 1.2rem;
            margin-bottom: 15px;
        }
        /* 这里必须在nth-of-type(1)前添加父元素,否则thead,tbody中的第一行都会生效 */
        thead tr:nth-of-type(1) {
            background-color: #ccc;
        }

</style>
</head>
<body>
<table id="list">
	<caption>文具列表</caption>
	<thead>
		<th>序号</th>
		<th>名称</th>
		<th>单价</th>
		<th>数量</th>		
	</thead>
	<tbody>
	</tbody>	
</table>
<script>
	var data = [//创建js数据数组
	{id:1, product:'铅笔', price:20, number:30 },
	{id:2, product:'橡皮', price:30, number:40 },
	{id:3, product:'***', price:40, number:50 },
	{id:4, product:'本子', price:50, number:60 }	
	];
	var list = document.getElementById('list');//通过获取id获取元素list
	var tbody = list.tBodies[0];//获取list表格的第一个tbody
	for(i = 0;i < data.length; i++){//用for循环，定义变量i，与数组data长度作比较
		var tr = document.createElement('tr');//创建tr元素
		Object.keys(data[i]).forEach(function(key){//用forEach遍历数组data
			tr.innerHTML += '<td>' + data[i][key] + '</td>';//将td元素及data中内容写入tr中
		})
		tbody.appendChild(tr); //在tbody中添加tr
	}
</script>
</body>
</html>


Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！