jQuery动态完成CURD操作
生活随笔
收集整理的這篇文章主要介紹了
jQuery动态完成CURD操作
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
jQuery動態(tài)完成CURD操作
- 成果要求
- 代碼展示
成果要求
代碼展示
<!DOCTYPE html> <html lang="zh_CN"> <head><meta charset="UTF-8"><title>Title</title><script src="../jQuery/jquery-3.6.0.min.js"></script><script>$(function (){//增加聯(lián)系方式按鈕事件$("#btn_add").click(function (){var div2=$("<div>");div2.append($("<label>電話</label>"));div2.append($("<input type='text' />"));//增加一個行內(nèi)刪除按鈕var btn_divdel=$(" <input type='button' value='刪除' />");//行內(nèi)刪除按鈕事件btn_divdel.click(function (){$(this).parent().remove();})div2.append(btn_divdel);$("#div1").append(div2);})//外部刪除按鈕事件$("#btn_del").click(function (){$("#div1").children().remove();})//外部清空按鈕事件$("#btn_clean").click(function (){$("#div1").empty();})})</script></head> <body> <input type="button" value="父元素" id="btn_fa"> <input type="button" value="增加一個按鈕" id="btn_addbtn"/> <input type="button" value="刪除" id="btn_del"> <input type="button" value="清空" id="btn_clean"> <input type="button" value="增加聯(lián)系方式" id="btn_add"> <input type="button" value="替換" id="btn_rep"> <div style="width: 400px;height: 400px;background-color: aqua" id="div1"></div></body> </html>總結(jié)
以上是生活随笔為你收集整理的jQuery动态完成CURD操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何高效学习-随意信息处理-信息的记忆
- 下一篇： 海思芯片