day57作業（包含data內容）
阿新 • • 發佈：2019-01-10
day57作業
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>週末作業講解</title> <style> /*//覆蓋*/ .cover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #616161; opacity: 0.4; z-index: 998; } /*//模態*/ .modal { height: 200px; width: 300px; background-color: white; position: absolute; margin-top: -100px; margin-left: -150px; top: 50%; left: 50%; z-index: 1000; } .hide { display: none; } </style> </head> <body> <button id="add">新增</button> <table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>愛好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Egon</td> <td>街舞</td> <td> <button class="edit-btn">編輯</button> <button class="delete-btn">刪除</button> </td> </tr> <tr> <td>2</td> <td>Alex</td> <td>燙頭</td> <td> <button class="edit-btn">編輯</button> //編輯按鈕 <button class="delete-btn">刪除</button> </td> </tr> <tr> <td>3</td> <td>苑局</td>//1 <td>日天</td>//2 <td> <button class="edit-btn">編輯</button> <button class="delete-btn">刪除</button> </td> </tr> </tbody> </table> <div id="myCover" class="cover hide"></div> <div id="myModal" class="modal hide">//模態 <div> <p> <label for="modal-name">姓名</label> <input type="text" id="modal-name"> </p> <p> <label for="modal-hobby">愛好</label> <input type="text" id="modal-hobby"> </p> <p> <button id="modal-submit">提交</button> <button id="modal-cancel">取消</button> </p> </div> </div> <script src="./jquery-3.2.1.min.js"></script> <script> // 定義一個彈出模態框的函式 function showModal() { $("#myCover,#myModal").removeClass("hide");//顯示模態 } // 關閉模態框 function closeModal() { // 1. 清空模態框中的input $("#myModal").find("input").val(""); $("#myCover,#myModal").addClass("hide");//隱藏 } // 給新增按鈕繫結事件 $("#add").on("click", function () { //點新增 顯示模態框 // 把模態框彈出! // $("#myCover").removeClass("hide"); // $("#myModal").removeClass("hide"); showModal() }); // 模態框中的取消按鈕繫結事件 $("#modal-cancel").on("click", function () { //點取消 隱藏模態框 // 2. 隱藏模態框 closeModal(); }); // 模態框中的提交按鈕繫結事件 $("#modal-submit").on("click", function () { // 1. 取到 使用者 填寫的 input框的值 模態框中內容，取值 var name = $("#modal-name").val(); // 把使用者在模態框裡輸入的姓名獲取到,儲存在name變數中 var hobby = $("#modal-hobby").val(); // 把使用者在模態框裡輸入的愛好獲取到,儲存在hobby變數中 var $myModalEle = $("#myModal"); // 判斷,按需操作 var $currentTrEle = $myModalEle.data("currentTr");//取當前行，需要判斷提交的是新增的還是編輯的。 if ($currentTrEle !== undefined) { //說明已存在的，即編輯。 // 說明是編輯狀態 $currentTrEle.children().eq(1).text(name); $currentTrEle.children().eq(2).text(hobby); // 清空之前儲存的當前行 $myModalEle.removeData();//如果不清空，永遠不會==undefined，變成了編輯。 } else { //新增 // 建立tr標籤把資料填進去 var trEle = document.createElement("tr"); var number = $("tr").length;//tr的長度即有幾個tr就幾行 $(trEle).html("<td>" + number + "</td>" + "<td>" + name + "</td>" + "<td>" + hobby + "</td>" + '<td><button class="edit-btn">編輯</button> <button class="delete-btn">刪除</button></td>' ); // 把建立好的tr新增到tbody中 $("tbody").append(trEle);//新增完內容再加到內部的最後 } // 提交完，隱藏模態框 closeModal(); }); // 2. 根據是編輯 還是新增 做不同的操作 // 2.1 如果是新增操作,就生成一條新的tr,加到table的最後 // 2.2 如果是編輯操作, 根據先前 編輯 按鈕那一行 // 難點在於 如何確定 編輯的是哪一行? --> 利用data()可以存具體的jQuery物件 // 給每一行的編輯按鈕繫結事件 // 要使用事件委託,基於已經存在的元素(頁面載入完之後存在的標籤)繫結事件 $("tbody").on("click", ".edit-btn", function () { //事件委託，一開始只有tbody在，edit-btn是需要一直存在的 //點編輯.edit-btn時觸發 // 把模態框彈出來 showModal(); // 把原來的資料填寫到模態框中的input var $currentTrEle = $(this).parent().parent(); // 把當前行的jQuery物件儲存起來 編輯時 $("#myModal").data("currentTr", $currentTrEle);//編輯，用於提交時判斷是編輯還是新增 var name = $currentTrEle.children().eq(1).text(); //取 索引1 var hobby = $currentTrEle.children().eq(2).text();//取 索引2的值 // 填 $("#modal-name").val(name);//點編輯後，把原來的資料放到模態框中，用於之後的修改，提交。 //提交部分在另一部分 $("#modal-hobby").val(hobby); }); // 給每一行的刪除按鈕繫結事件 $("tbody").on("click", ".delete-btn", function () { // 刪除被點選的刪除按鈕的那一行 var $currentTrEle = $(this).parent().parent(); // 更新序號 // 找到當前行後面所有的tr,依次更新序號 //上一個this和下一個this不一樣 $currentTrEle.nextAll().each(function () {//找到後面的所有，更新序號 // 取到原來的序號 var oldNumber = $(this).children().first().text(); // 將原來的序號-1,再賦值回去 $(this).children().first().text(oldNumber - 1); }); $currentTrEle.remove();//刪除 }); </script> </body> </html>
效果：
新增和編輯，新增按鈕只需要顯示模態框，編輯顯示完模態框，還需儲存原有行內容，並將原有行內容顯示在模態框中。
刪除需要修改之後每一行的編號。
提交內容需要判斷該模態框是點選新建按鈕產生的，還是點選編輯按鈕產生的。
本題主要考察data內容。