JavaScript新手入门：渲染学生列表

梦想成为行业大牛

已于 2024-04-22 11:42:51 修改

阅读量617

点赞数 11

文章标签： javascript 开发语言 ecmascript

于 2024-04-22 11:40:21 首次发布

本文链接：https://blog.csdn.net/2301_80660386/article/details/138067056

版权

每日一题，题题有提升！

文章目录

前言
一、案例分析
二、代码实现
- 1.HTML和CSS
- 2.JavaScript
- 3.运行结果
总结

前言

当我学习到对象这一个知识板块时，我认为对象好比一个装物体的盒子，你可以将你描述该物体的属性，和方法看作一个物品放入盒子里面，这样当你打开盒子你就能够清晰明了的知道每个数据对应的属性和方法，提升代码可读性，接下来这个案例是遍历对象的一个案例！

一、案例分析

该案例主要是讲数据渲染进表格里面去，首先要运用HTML和CSS构建一个表格框架，其次再用JavaScript将数据渲染进表格。首先我们要创建一个students对象类，将描述其对象的属性放在对象里面，其次就是通过遍历对象将数据渲染到表格中！

二、代码实现

1.HTML和CSS

代码如下（示例）：

<style>
	table{
		width: 600px;
		text-align: center;
	}
	table,th,td{
		border: 1px solid #ccc;
		border-collapse: collapse;/* 相邻的单元格边框会合并为一个单一的边框，
		而不是每个单元格都有自己独立的边框。这可以确保表格的边框看起来更加整洁和连续。*/
	}
	/* caption用于为表格添加标题或简短描述，这有助于提高数据的可读性和理解性 */
	caption{
		font-size: 18px;
		margin-bottom: 10px;
		font-weight: 700;
	}
	tr{
		height: 40px;
		cursor: pointer;//鼠标悬停变成小手
	}
	table tr:nth-child(1){
		background-color: #ddd;
	}
	table tr:not(:first-child):hover{
		background-color: #eee;
	}
</style>	
<body>
<!-- 渲染学生表格 -->
<h2>学生信息</h2>
<table >
	<caption>学生列表</caption>
	<tr>
		<th>序号</th>
		<th>姓名</th>
		<th>年龄</th>
		<th>性别</th>
		<th>家庭地址</th>
	</tr>

2.JavaScript

代码如下（示例）：


<script>
	let students=[
					{uname:'张三',age:18,gender:'男',hometown:'重庆市'},
					{uname:'张四',age:14,gender:'女',hometown:'重庆市'},
					{uname:'张五',age:13,gender:'男',hometown:'重庆市'},
					{uname:'张六',age:11,gender:'女',hometown:'重庆市'},
					{uname:'张其',age:12,gender:'男',hometown:'重庆市'},
				]
	for(let k=0;k<students.length;k++){
		document.write(`
			<tr>
				<td>${k+1}</td>
				<td>${students[k].uname}</td>
				<td>${students[k].age}</td>
				<td>${students[k].gender}</td>
				<td>${students[k].hometown}</td>
		</tr>
		`)	
	}
</script>
</table>

3.运行结果

鼠标悬停在对应的行，会改变背景颜色以及鼠标光标变成小手（这里未出现未出现小手的原因是截图鼠标移动为截到！）

总结

以上就是今天我想分享的内容，希望对各位新手宝宝们有帮助哦~~~

梦想成为行业大牛

关注

11
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript新手入门：渲染学生列表

当我学习到对象这一个知识板块时，我认为对象好比一个装物体的盒子，你可以将你描述该物体的属性，和方法看作一个物品放入盒子里面，这样当你打开盒子你就能够清晰明了的知道每个数据对应的属性和方法，提升代码可读性，接下来这个案例是遍历对象的一个案例！以上就是今天我想分享的内容，希望对各位新手宝宝们有帮助哦~~~
复制链接

扫一扫