JS实现表格增、删、排序

最新推荐文章于 2024-01-29 07:53:14 发布

阿敁

最新推荐文章于 2024-01-29 07:53:14 发布

阅读量1.1k

点赞数

文章标签： javascript css css3

本文链接：https://blog.youkuaiyun.com/weixin_44370461/article/details/122516328

版权

本文详细介绍了如何利用JavaScript实现表格数据的动态添加、删除和排序功能，通过实例展示了具体的操作步骤和核心代码，帮助读者掌握前端表格操作技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

  1、根据图片，完成页面布局，100%还原，圆角使用border-radius:3px;
		2、实现文本框添加姓名、年龄，要求不能添加空值，表格中ID需要按照序号依次自动生成。
		3、点击移入变色按钮开启变色，再点击一次，关闭变色
		4、搜索具体的姓名，实现搜索功能，高亮显示结果
		5、点击删除，删除整行数据，删除之后序号重新排序
		6、附加题：点击排序按钮实现年龄从小到大排序
		tips:参考效果：http://js.7vnet.com/javascript/js005/js009.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>周测，表格练习</title>
		<style type="text/css">
		/* 公共类 */
			.container{
   
				width: 1000px;
				margin: 0 auto;
				font-size: 12px;
			}
			.content{
   
				padding: 22px 22px 0px 22px;
				border: 1px solid #ececec;
				text-align: left;
				border-bottom: 10px solid #e8f3ec;
				margin-bottom: 78px;
			}
			input{
   
				height: 32px;
				width: 182px;
				border-radius: 3px;
				border: 1px solid #cccccc;
				padding-left: 12px;
				outline: none;
				display: inline-block;
			}
			button{
   
				padding: 9px 12px;
				border: 1px solid #4ab9db;
				background-color: #5bc0de;
				color: #FFFFFF;
				border-radius: 3px;
			}
			button:hover{
   
				color: #fff;
				background-color: #31b0d5;
				border-color: #269abc;
			}
			/* 头部 */
			.top{
   
				margin-bottom: 22px;
			}
			/* 主要表格部分 */
			table{
   
				border: 1px solid #cccccc;
				color: #4f6f7d;
				border-left: none;
			} 
			thead th{
   
				border-bottom: 1px solid #cccccc;
			}
			th{
   
				border-left: 1px solid #cccccc;
				height: 33px;
				padding-left: 10px

最低0.47元/天解锁文章