要求1.設(shè)計網(wǎng)頁equipmentList.html，分為上下兩個部分：上方的表格元素(table)顯示所有輸入的設(shè)備信息，下方的表單元素(form)支持用戶新增或者修改一個設(shè)備信息(注意站點名稱、設(shè)備分類、設(shè)備類型和設(shè)備狀態(tài)使用下拉選擇框或者復(fù)選框)。
要求2：用自己定義的CSS或者引用現(xiàn)有Web前端框架CSS對equipmentList.html的顯示樣式進行修飾
要求3：使用JavaScript支持新增設(shè)備信息：用戶點擊”新增”按鈕，用戶輸入修改設(shè)備信息后，點擊”確定”按鈕，將輸入設(shè)備信息新增到上方表格
要求4：使用JavaScript支持修改設(shè)備信息：用戶點擊”修改”超鏈接，下方表單顯示超鏈接所在行的設(shè)備信息，用戶修改設(shè)備信息后，點擊確定按鈕，將輸入信息替換原來超鏈接所在行的設(shè)備信息。
要求5：使用JavaScript支持刪除設(shè)備信息：用戶點擊”刪除”超鏈接，刪除超鏈接所在行的設(shè)備信息。
要求6：使用JavaScript對用戶輸入的設(shè)備信息進行驗證，如果設(shè)備名稱信息輸入錯誤，精確提示用戶輸入錯誤(例如：”設(shè)備名稱不能為空!”；”安裝時間格式必須是yyyy-MM-dd HH:mm:ss”)；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>equipmentList</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.6.2/css/bootstrap.min.css"> <!-- 引用jQuery庫 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div id="listTable"> <table class="table"> <thead> <tr> <th scope="col">站點名稱</th> <th scope="col">設(shè)備名稱</th> <th scope="col">設(shè)備編碼</th> <th scope="col">設(shè)備分類</th> <th scope="col">設(shè)備類型</th> <th scope="col">安裝時間</th> <th scope="col">設(shè)備狀態(tài)</th> <th scope="col">操作</th> </tr> </thead> <tbody> <tr> <th scope="row">昌都生態(tài)監(jiān)測站</th> <td>凍土設(shè)備01</td> <td>XZ001</td> <td>土壤</td> <td>凍土檢測</td> <td>2021-05-18 16:53:42</td> <td>正常</td> <td class="operate"> <a href="#" class="change">修改</a> <a href="#" class="remove">刪除</a> </td> </tr> <tr> <th scope="row">昌都生態(tài)監(jiān)測站</th> <td>凍土設(shè)備04</td> <td>XZ004</td> <td>土壤</td> <td>凍土檢測</td> <td>2021-05-17 16:54:08</td> <td>正常</td> <td class="operate"> <a class="change" href="#">修改</a> <a class="remove" href="#">刪除</a> </td> </tr> <tr> <th scope="row">申扎生態(tài)監(jiān)測站</th> <td>凍土設(shè)備01</td> <td>XZ001</td> <td>土壤</td> <td>凍土檢測</td> <td>2021-04-01 10:09:11</td> <td>正常</td> <td class="operate"> <a href="#" class="change">修改</a> <a href="#" class="remove">刪除</a> </td> </tr> <tr> <th scope="row">日喀則生態(tài)監(jiān)測站</th> <td>凍土設(shè)備01</td> <td>XZ001</td> <td>土壤</td> <td>凍土檢測</td> <td>2021-03-30 10:16:04</td> <td>正常</td> <td class="operate"> <a href="#" class="change">修改</a> <a href="#" class="remove">刪除</a> </td> </tr> <tr> <th scope="row">定日生態(tài)監(jiān)測站</th> <td>凍土設(shè)備01</td> <td>XZ001</td> <td>土壤</td> <td>凍土檢測</td> <td>2021-03-29 10:11:23</td> <td>正常</td> <td class="operate"> <a href="#" class="change">修改</a> <a href="#" class="remove">刪除</a> </td> </tr> <tr> <th scope="row">山南生態(tài)監(jiān)測站</th> <td>凍土設(shè)備01</td> <td>XZ001</td> <td>土壤</td> <td>凍土檢測</td> <td>2021-05-18 16:53:42</td> <td>正常</td> <td class="operate"> <a href="#" class="change">修改</a> <a href="#" class="remove">刪除</a> </td> </tr> <tr> <th scope="row">那曲生態(tài)監(jiān)測站</th> <td>設(shè)備9</td> <td>9</td> <td>9</td> <td>9</td> <td>2021-03-23 10:33:35</td> <td>正常</td> <td class="operate"> <a href="#" class="change">修改</a> <a href="#" class="remove">刪除</a> </td> </tr> <tr> <th scope="row">改則生態(tài)監(jiān)測站</th> <td>設(shè)備2</td> <td>2</td> <td>2</td> <td>2</td> <td>2021-03-17 10:10:27</td> <td>正常</td> <td class="operate"> <a href="#" class="change">修改</a> <a href="#" class="remove">刪除</a> </td> </tr> <tr> <th scope="row">芒康生態(tài)監(jiān)測站</th> <td>設(shè)備7</td> <td>7</td> <td>7</td> <td>7</td> <td>2021-03-17 10:32:19</td> <td>正常</td> <td class="operate"> <a href="#" class="change">修改</a> <a href="#" class="remove">刪除</a> </td> </tr> </tbody> </table> <button type="button" class="btn btn-primary" id="add">新增</button> </div> <div id="submitForm"> <form> <div class="form-group row"> <label for="siteName" class="col-md-4 col-form-label">站點名稱(*)</label> <div class="col-md-8"> <select class="custom-select " id="siteName"> <option selected>昌都生態(tài)監(jiān)測站</option> <option>申扎生態(tài)監(jiān)測站</option> <option>日喀則生態(tài)監(jiān)測站</option> <option>定日生態(tài)監(jiān)測站</option> <option>山南生態(tài)監(jiān)測站</option> <option>那曲生態(tài)監(jiān)測站</option> <option>改則生態(tài)監(jiān)測站</option> <option>芒康生態(tài)監(jiān)測站</option> </select> </div> </div> <!-- 設(shè)備名稱 --> <div class="form-group row"> <label for="deviceName" class="col-md-4 col-form-label">設(shè)備名稱(*)</label> <div class="col-md-8"> <input type="input" class="form-control" id="deviceName"> </div> </div> <div class="alert alert-danger alert-dismissible fade show" role="alert" id="emptyDeviceName"> <strong>設(shè)備名稱不能為空!</strong> </div> <!-- 設(shè)備編碼 --> <div class="form-group row"> <label for="deviceCode" class="col-md-4 col-form-label">設(shè)備編碼(*)</label> <div class="col-md-8"> <input type="input" class="form-control" id="deviceCode"> </div> </div> <div class="alert alert-danger alert-dismissible fade show" role="alert" id="emptyDeviceCode"> <strong>設(shè)備編碼不能為空!</strong> </div> <div class="form-group row"> <label for="deviceSort" class="col-md-4 col-form-label">設(shè)備分類(*)</label> <div class="col-md-8"> <select class="custom-select " id="deviceSort"> <option selected>土壤</option> <option>9</option> <option>2</option> <option>7</option> </select> </div> </div> <div class="form-group row"> <label for="deviceType" class="col-md-4 col-form-label">設(shè)備類型(*)</label> <div class="col-md-8"> <select class="custom-select " id="deviceType"> <option selected>凍土檢測</option> <option>9</option> <option>2</option> <option>7</option> </select> </div> </div> <!-- 時間 --> <div class="form-group row"> <label for="installTime" class="col-md-4 col-form-label">安裝時間(*)</label> <div class="col-md-8"> <input class="form-control" id="installTime" placeholder="yyyy-MM-dd HH:mm:ss"> </div> </div> <div class="alert alert-danger alert-dismissible fade show" role="alert" id="wrongTime"> 請按照<strong>yyyy-MM-dd HH:mm:ss</strong>的格式進行填寫! </div> <div class="form-group row"> <label for="deviceStatus" class="col-md-4 col-form-label">設(shè)備狀態(tài)(*)</label> <div class="col-md-4"> <select class="custom-select mr-md-4" id="deviceStatus"> <option selected>正常</option> <option>One</option> <option>Two</option> <option>Three</option> </select> </div> </div> <!-- 操作按鈕 --> <div class="form-group row" id="confirmBtn"> <div class="col-md-6"> <button type="button" class="btn btn-primary" id="cancel">取消</button> <button type="button" class="btn btn-primary" id="save">保存</button> </div> </div> </form> </div> </body> </html>
<style> #add { position: relative; left: 20px; } #submitForm { display: flex; justify-content: space-evenly } #confirmBtn { display: flex; } </style>
<script> let change; // 判斷修改行數(shù) let num; let siteName, deviceName, deviceCode, deviceSort, deviceType, installTime, deviceStatus; // 先隱藏下半部分 $('#submitForm').hide(); // 隱藏錯誤提示框 $('#emptyDeviceName,#emptyDeviceCode,#wrongTime').hide(); // 新增按鈕出現(xiàn)下半內(nèi)容 $('#add').click(function () { // 標識變量，表示不是修改 change = 0; $('#submitForm').show(); }); // 取消按鈕使下半部分消失 $('#cancel').click(function () { $('#submitForm').hide(); }) // table中增加一行數(shù)據(jù) $('#save').click(function () { // 標識變量，控制數(shù)據(jù)添加 let flag = 1; // 設(shè)備名稱是否為空 switch ($('#deviceName').val()) { case (''): $('#emptyDeviceName').show(); flag = 0; break; default: $('#emptyDeviceName').hide(); flag = 1; }; // 設(shè)備編碼是否為空 switch ($('#deviceCode').val()) { case (''): $('#emptyDeviceCode').show(); flag = 0; break; default: $('#emptyDeviceCode').hide(); flag = 1; } // 時間格式是否符合要求 let content = $('#installTime').val(); // yyyy-MM-dd HH:mm:ss 默認都是31天 let check = /^[1-2]{1}\d{3}-1[0-2]|0\d-(3[0-1]|[0-2]\d)\s([0-1]\d|2[0-3]):([0-5]\d:[0-5]\d)$/; if (!check.test(content)) { $('#wrongTime').show(); flag = 0; } else { $('#wrongTime').hide(); flag = 1; } // 如果符合條件，則進行數(shù)據(jù)append if (flag) { // 修改操作 if (change) { // 獲取填寫好的數(shù)據(jù) let info; info = [ $('#siteName').val(), $('#deviceName').val(), $('#deviceCode').val(), $('#deviceSort').val(), $('#deviceType').val(), $('#installTime').val(), $('#deviceStatus').val() ]; let changeInfo = '<th scope="row">' + $('#siteName').val() + '</th><td>' + $('#deviceName').val() + '</td><td>' + $('#deviceCode').val() + '</td><td>' + $('#deviceSort').val() + '</td><td>' + $('#deviceType').val() + '</td><td>' + $('#installTime').val() + '</td><td>' + $('#deviceStatus').val() + '</td><td class="operate"><a href="#" class="change" >修改</a> ' + '<a href="#" class="remove">刪除</a></td >; '; $('tbody').children().eq(num).html(changeInfo); } else { // 新增操作 let add = '<tr><th scope="row">' + $('#siteName').val() + '</th><td>' + $('#deviceName').val() + '</td><td>' + $('#deviceCode').val() + '</td><td>' + $('#deviceSort').val() + '</td><td>' + $('#deviceType').val() + '</td><td>' + $('#installTime').val() + '</td><td>' + $('#deviceStatus').val() + '</td><td class="operate"><a href="#" class="change" >修改</a> ' + '<a href="#" class="remove">刪除</a></td ></tr > ; ' $('.table').append(add); } } }) // 修改信息 $('.change').click(function () { // 顯示表單 $('#submitForm').show(); // 標識變量，表示是修改 change = 1; // 獲取對應(yīng)行的數(shù)據(jù) // 所在行數(shù) num = $(this).parent().parent().prevAll().length; // console.log(num); // let obj = $(this).parent().prevAll();//從后往前獲取,包含本身父節(jié)點 var obj = $(this).parent().siblings();//從前向后獲取,包含本身父節(jié)點 let len = obj.length; let pre; // 將列表數(shù)據(jù)顯示到表單的對應(yīng)位置上 let cnt = 0; $('#siteName').val(obj.eq(cnt++).text()); $('#deviceName').val(obj.eq(cnt++).text()); $('#deviceCode').val(obj.eq(cnt++).text()); $('#deviceSort').val(obj.eq(cnt++).text()); $('#deviceType').val(obj.eq(cnt++).text()); $('#installTime').val(obj.eq(cnt++).text()); $('#deviceStatus').val(obj.eq(cnt++).text()); }) // 刪除行數(shù)據(jù) // 使用on綁定事件到動態(tài)生成的元素上時,不能對動態(tài)生成的對象操作,需要從其父節(jié)點追溯到本身!! $('.table').on('click', '.remove', function () { $(this).parent().parent().remove(); }); </script>
最后效果圖：
上方table
下方form
報錯
總結(jié)：收獲最大的是使用on綁定事件到動態(tài)生成的元素上時,不能對動態(tài)生成的對象操作,需要從其父節(jié)點追溯到本身。當時設(shè)置刪除操作怎么點都沒反應(yīng)，為了解決這個問題費了好大心思來著……
結(jié)果：老師評價：多次操作后，修改會變成新增，暫時沒看到底什么原因……看了也許會更新下
浙公網(wǎng)安備 33010602011771號