JavaScript-Dom入门实例练习-图书管理系统的提交页面

最新推荐文章于 2024-04-19 00:17:37 发布

ALonelyLemon

最新推荐文章于 2024-04-19 00:17:37 发布

阅读量1.7k

点赞数 4

分类专栏： JavaScript 文章标签： JavaScript DOM

本文链接：https://blog.csdn.net/lemon_yu/article/details/88942348

版权

文章目录

需求分析
页面设计
修改样式
删除无用信息
添加新的信息
完整代码
- html
- css
- JavaScript
进阶改良

代码这种东西看十遍不如敲一遍。
—鲁·我没有说过·迅·沃茨基硕德

好的程序猿一定是敲代码敲出来的，在学习过的基础知识后，多敲两遍实例能极大地增强自己的理解。
因为是dom的实例，所以大部分笔记都在JavaScript部分，作者水平很渣html和css都是怎么简单怎么来，相信大家都能看懂，我在下面还贴了手册连接。
css手册
 html手册
 JavaScript手册

需求分析

我们今天的目标是图书管理系统的动态提交页面
对于完整的图书管理系统我们可能会用表单提交这个页面

要能够添加图书，包括书籍的名称、编号、价格。或许还会有更多需求。
基本功能：增删改查。因为只是完成提交页面所以不需要读取和修改数据库中的信息，只是针对当前页面所以我们要完成当前页面的增删改。

html文件名：dom_D.html
css文件名：dom_C.css
js文件名：dom_J.js

页面设计

首先我们需要一个表格显示图书信息

<body>

   <div><!- 这个表格用于显示信息->
       <table >
           <tr>
               <th>书名</th>
               <th>编号</th>
               <th>价格</th>
               <th>操作</th>
           </tr>
           <tr>
               <td>软件工程导论</td>
               <td>001</td>
               <td>39.50</td>
               <td><a href="#">删除</a></td>

           </tr>
           <tr>
               <td>人工智能导论</td>
               <td>002</td>
               <td>31.00</td>
               <td><a href="#">删除</a></td>
           </tr>
       </table>
   </div>
</body>

然后我们还需要能够添加新的图书


 <div><!-这个表格用于添加信息 ->
       <table>
           <tr>
               <th colspan="2" align="center">
                   添加书籍
               </th>
           </tr>
           <tr>
               <td>书名：</td>
               <td>
                   <input type="text" name="bookName" id="bookName"/>
               </td>
           </tr>
           <tr>
               <td>编号：</td>
               <td>
                   <input type="text" name="number" id="number"/>
               </td>
           </tr>
           <tr>
               <td>价格：</td>
               <td>
                   <input type="text" name="pay" id="pay"/>
               </td>
           </tr>
           <tr>
               <td colspan="2" align="center">
                   <button id="addButton" value="#">
                       添加书籍
                   </button>
                   <button id="upload" value="#">
                       上传文档
                   </button>
                   <!-为上传表单预留的按钮，本次实验没有用到->
           </tr>
       </table>

   </div>

太丑了，使用css稍微美化一下页面后

修改样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书籍管理</title>

    <link rel="stylesheet" type="text/css" href="dom_C.css"/><!-引用css样式表 ->
    <script type="text/javascript" src="dom_J.js"></script>

最低0.47元/天解锁文章

ALonelyLemon

关注

4
点赞
踩
28

收藏

觉得还不错? 一键收藏
2
评论
JavaScript-Dom入门实例练习-图书管理系统的提交页面

文章目录需求分析页面设计修改样式删除无用信息添加新的信息完整代码htmlcssJavaScript代码这种东西看十遍不如敲一遍。—鲁·我没有说过·迅·沃茨基硕德好的程序猿一定是敲代码敲出来的，在学习过的基础知识后，多敲两遍实例能极大地增强自己的理解。因为是dom的实例，所以大部分笔记都在JavaScript部分，作者水平很渣html和css都是怎么简单怎么来，相信大家都能看懂，我在下面...
复制链接

扫一扫

专栏目录