diff --git "a/16 \351\230\231\350\213\217\346\226\207/20231208\344\275\234\344\270\232.md" "b/16 \351\230\231\350\213\217\346\226\207/20231208\344\275\234\344\270\232.md"
new file mode 100644
index 0000000000000000000000000000000000000000..61b313b42da81337f1c24616adaf2c9e680cf1fd
--- /dev/null
+++ "b/16 \351\230\231\350\213\217\346\226\207/20231208\344\275\234\344\270\232.md"	
@@ -0,0 +1,110 @@
+```html
+<script src="./js/index.js"></script>
+</body>
+<script>
+    const creator = 'cheng';
+
+    //渲染的函数
+    function getBooksData() {
+        axios({
+            url: "https://hmajax.itheima.net/api/books",
+            params: {
+                creator,
+            }
+        }).then(result => {
+            const data = result.data.data;
+            const tbody = document.querySelector('tbody');
+            // console.log(data)
+            tbody.innerHTML = data.map((item, index) => {
+                const {id, bookname, author, publisher} = item;
+                return `<tr>
+          <td>${index + 1}</td>
+          <td>${bookname}</td>
+          <td>${author}</td>
+          <td>${publisher}</td>
+          <td data-id=${id}>
+            <span class="del">删除</span>
+            <span class="edit">编辑</span>
+          </td>
+        </tr>`
+            }).join("");
+        })
+    }
+
+    //  调用一次渲染函数
+    getBooksData();
+    //添加
+    const btn = document.querySelector('.add-btn');
+    const form = document.querySelector('.add-form');
+    const addModalBox=document.querySelector('.add-modal');
+    const addModal = new bootstrap.Modal(addModalBox);
+    btn.addEventListener('click', () => {
+        const book = serialize(form, {hash: true, empty: true});
+        axios({
+            url: "https://hmajax.itheima.net/api/books",
+            method:"post",
+            data:{
+                creator,
+                ...book,
+            }
+        }).then(result=>{
+            form.reset();
+            addModal.hide();
+            getBooksData();
+        }).catch(error=>{
+            alert('请输入完整')
+        })
+    })
+
+    const list = document.querySelector('.list');
+    list.addEventListener('click',e=>{
+        //    删除
+        const {target}=e;
+        if (target.className === 'del'){
+            const id=target.parentNode.dataset.id;
+            const s = confirm('是否删除！');
+            if (!s){
+                return;
+            }
+            axios({
+                url:"https://hmajax.itheima.net/api/books/"+id,
+                method: 'delete',
+            }).then(result=>{
+                getBooksData();
+                alert(result.data.message);
+                })
+        }
+        if (target.className==='edit'){
+            const form=document.querySelector('.edit-form');
+            const editModalBox=document.querySelector('.edit-modal');
+            const editModal=new bootstrap.Modal(editModalBox);
+            editModal.show();
+            const id=target.parentNode.dataset.id;
+            axios({
+                url:"https://hmajax.itheima.net/api/books/"+id,
+            }).then(result=>{
+                const data=result.data.data;
+                const{id,bookname,author,publisher}=data;
+                form.querySelector('.bookname').value=bookname;
+                form.querySelector('.author').value=author;
+                form.querySelector('.publisher').value=publisher;
+            })
+        document.querySelector('.edit-btn').addEventListener('click',function (){
+            const book=serialize(form,{hash: true,empty: true});
+            axios({
+                url:"https://hmajax.itheima.net/api/books/"+id,
+                method:"put",
+                data: {
+                    creator,
+                    ...book,
+                }
+            }).then(result=>{
+                editModal.hide();
+                getBooksData();
+            })
+        })
+        }
+    })
+
+</script>
+```
\ No newline at end of file