JS增删改查（1）———之增查

最新推荐文章于 2022-02-19 10:38:17 发布

前端搬砖工程师

最新推荐文章于 2022-02-19 10:38:17 发布

阅读量129

点赞数 1

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/m0_47708359/article/details/106504301

版权

js 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>车辆管理系统</title>
</head>
<body>
    <table border="1" style="width: 700px;height: 800px;text-align:center;" >
        <tr>
            <td colspan="5" style="background-color: chocolate;font-size: 23px; font-weight: bold;">欢迎使用车辆管理系统</td>
          
        </tr>
        <tr>
            <td>
                <button onclick="but()" name="car" id="car">
                    1、添加车辆
                </button>
            </td>
            <td>
               <button onclick="butt()" name="car1" id="car1">
                   2、查询车辆
               </button>
            </td>
            <td>
               <button onclick="but()" name="" id="">
                   3、修改车辆
               </button>
            </td>
            <td>
               <button onclick="but()" name="" id="">
                   4、删除车辆
               </button>
            </td>
            <td>
               <button onclick="but()" name="" id="">
                   5、退出系统
               </button>
            </td>
        </tr>
        <tr>
            <td colspan="5" > <p  id="car_name"></p></td>
            
        </tr>
        <tr>
            <td colspan="5" ><p id="car_id"></p></td>
           
        </tr>
        <tr>
            <td colspan="5" ><p id="car_year"></p></td>
            
        </tr>
        <tr>
            <td colspan="5" ><p id="car_age"></p></td>
         
        </tr>
        <tr>
            <td colspan="5" ><p id="car_address"></p></td>
            
        </tr>
        <tr>
            <td colspan="5" id="chaxun" style="background-color: dodgerblue;font-size: 25px;font-weight: bold;">查询结果</td>
           
        </tr>
        <tr>
            <td id="id"></td>
            <td id="name"></td>
            <td id="year"></td>
            <td id="age"></td>
            <td id="address"></td>
            
        </tr>
    </table>
    <script>
         car = []     /* //全局变量。 */
         /* 添加*/
        function but(){   /* //button  onclick  的点击事件触发发生以下判断，和文本框 */
            /* 对象字面量，直接量 */
            var che = {"carName":"","carId":"" ,"carYear":"" ,"carAge":"" ,"carAddress":""};
            che["carName"]=prompt("请输入车名：");/* 通过文本框获取信息 */
            if(che['carName']==""||che['carName']==null||che['carName']==NaN){/* //判断输入是否为空 */
                alert("车名不能为空！");
                return;
            }
            che["carId"]=prompt("请输入车辆编号：");
            if(che["carId"]==""||che["carId"]==null){/* //判断输入是否为空 */
                alert("编号不能为空！");
                return;
            }
            che["carYear"]=prompt("请输入车辆年份：");
            if(che["carYear"]==""||che["carYear"]==null){/* //判断输入是否为空 */
                alert("编号不能为空！");
                return;
            }
            che["carAge"]=prompt("请输入车辆年龄：");
            if(che["carAge"]==""||che["carAge"]==null){/* //判断输入是否为空 */
                alert("编号不能为空！");
                return;
            }
            che["carAddress"]=prompt("请输入车辆产地：");
            if(che["carAddress"]==""||che["carAddress"]==null){/* //判断输入是否为空 */
                alert("编号不能为空！");
                return;
            }
            /* 把上面获取到的信息依次排列打印显示 */
            car.push(che);
            document.getElementById('car_name').innerHTML="车名："+che.carName;
           
            document.getElementById('car_id').innerHTML="编号："+che.carId;
           ById('car_year').innerHTML="年份："+che.carYear;
           
            document.getElementById('car_age').innerHTML="车龄："+che.carAge;
            
            document.getElementById('car_address').innerHTML="产地："+che.carAddress;
            console.log(car);
        }
         /* 查找*/
        function butt(){/* button  onclick  的点击事件触发文本框 */
            
            var bian = prompt("请输入编号：");/* 通过文本框获取信息 */
           
            /* // console.log(bian,car); */
           
            for(var i = 0; i <= car.length-1; i++){   /*   遍历数组 全局变量  car[] 中的所有对象 */
               /*  // console.log(car[i].carId) */
                if(car[i].carId == bian){
                        document.getElementById('id').innerHTML="编号："+car[i].carId;
                        document.getElementById('name').innerHTML="车名："+car[i].carName;
                        document.getElementById('year').innerHTML="年份："+car[i].carYear;
                        document.getElementById('age').innerHTML="车龄："+car[i].carAge;
                        document.getElementById('address').innerHTML="产地："+car[i].carAddress;
                        break;
                }else{
                    if(i == car.length -1){
                        alert("该车辆信息不存在！");
                        /* // console.log('该车辆信息不存在！'); */
                    }
                }
            }
                
            
        
        }
       
        
    </script>
</body>
</html>

前端搬砖工程师

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS增删改查（1）———之增查

车辆管理系统 </tr> <tr> <td> <button onclick="but()" name="car" id="car"> 1、添加车辆 </button> </td> <td> <button o...
复制链接

扫一扫

专栏目录