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

最新推荐文章于 2024-04-22 01:15:00 发布

原创

最新推荐文章于 2024-04-22 01:15:00 发布 · 2k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #DOM

这篇博客通过实现图书管理系统的动态提交页面，讲解了JavaScript DOM操作，包括页面设计、样式修改、删除与添加图书信息。作者强调通过实践来加强DOM的理解，并提供了HTML、CSS和JavaScript的代码示例，探讨了事件委托以优化代码效率。

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

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

好的程序猿一定是敲代码敲出来的，在学习过的基础知识后，多敲两遍实例能极大地增强自己的理解。
因为是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>