本文展示了一个使用纯JavaScript实现的表格增删改查功能。通过点击按钮，可以实现表格数据的新增、修改和删除。界面简洁，代码逻辑清晰，但存在删除数据后序号未处理及表单验证提示等问题。
- 功能: 新增表格数据， 修改表格数据， 删除表格数据。
不完善区: 删除数据之后序号没有做处理 ，表单验证简单的提示警告， 没有文字提醒。
界面:
下面是代码:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>js</title>
- <style>
- * {
- padding: 0px;
- margin: 0px;
- }
- button {
- display: inline-block;
- padding: 8px 20px;
- background-color: rgb(91, 91, 214);
- color: #fff;
- border: 0px;
- border-radius: 5px;
- border: 1px solid rgb(149, 149, 236);
- outline: none;
- cursor: pointer;
- }
- button:active {
- background-color: rgb(69, 69, 163);
- }
- .content {
- width: 1200px;
- margin: 0 auto;
- }
- .btnGroup {
- margin-top: 20px;
- }
- .content .mytb {
- text-align: center;
- }
- .tableArea {
- padding-top: 40px;
- }
- .mytb {
- width: 100%;
- border: 1px solid #cccccc;
- border-collapse: collapse;
- }
- .mytb thead tr {
- background-color: #666;
- line-height: 32px;
- color: #fff;
- }
- .mytb tbody {
- font-size: 14px;
- font-weight: lighter;
- color: #333;
- }
- .mytb tbody tr:nth-of-type(even) {
- background-color: #f1f1f1;
- line-height: 30px;
- }
- .mytb tbody tr:nth-of-type(odd) {
- background-color: #e0e0e0;
- line-height: 30px;
- }
- .mytb tbody tr:nth-of-type(even):hover {
- background-color: #d1d1d1;
- cursor: pointer;
- }
- .mytb tbody tr:nth-of-type(odd):hover {
- background-co
最低0.47元/天 解锁文章
扫一扫
2401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
