使用js dom和jquery分別實現簡單增刪改

時間 2019-12-11

標籤使用 dom jquery 分別實現簡單增刪欄目 JavaScript 简体版

原文原文鏈接

<html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title></title>    <script type="text/javascript" src="js/jquery.min.js"></script>    <script type="text/javascript">        $(function(){            gaoliang();            var $seldel = undefined;            var seldel = undefined;//高亮選中            function gaoliang() {                $("li").click(function () {                    $("li").css(                        "backgroundColor", "red"                    );                    this.style.backgroundColor = "yellow";                    $seldel = $(this);                    seldel = this;                });            }//使用jquery添加對象            $("#btnAdd1").click(function () {                var input = window.prompt("輸入數據");                var $newli = $("<li>" + input + "</li>");                $newli.appendTo("#Ol");                gaoliang();            });//使用dom元素添加對象            document.getElementById("btnAdd2").onclick = function () {                var input = window.prompt("輸入數據");                var newli = document.createElement("li");                newli.innerHTML = input;                document.getElementById("Ol").appendChild(newli);                gaoliang();            }//使用jquery刪除對象            $("#btnDel1").click(function () {                $seldel.remove();            });//使用dom元素刪除對象            document.getElementById("btnDel2").onclick = function () {                seldel.parentNode.removeChild(seldel);            }//使用jquery插入數據            $("#btnInsert1").click(function () {                var input=window.prompt("輸入插入的數據");                var $newli=$("<li>"+ input+"</li>");                $newli.insertBefore($seldel);                gaoliang();            });//使用dom插入數據            document.getElementById("btnInsert2").onclick = function () {                var Ol = document.getElementById("Ol");                var input = window.prompt("輸入插入的數據");                var newli = document.createElement("li");                newli.innerHTML = input;                Ol.insertBefore(newli, seldel);                gaoliang();            }//使用jquery編輯選中的數據            $("#btnEdit1").click(function () {                var oldtxt = $seldel.html();                var $edit = $("<input id='btnE' type='text' value='" + oldtxt + "'/>");                $seldel.html($edit);                $edit.focus();                $edit.blur(function () {                    var newtxt = $(this).val();                    $seldel.html(newtxt);                });            });//使用dom編輯選中的數據            document.getElementById("btnEdit2").onclick = function () {                var edittext = document.createElement("input");                edittext.type = "text";                edittext.value = seldel.innerHTML;;                seldel.innerHTML = "";                seldel.appendChild(edittext);                edittext.focus();                edittext.onblur = function () {                    seldel.innerHTML = edittext.value;                }            }        } )    </script></head><body><ol id="Ol">    <li id="haha">1</li>    <li>2</li>    <li>3</li>    <li>4</li></ol><input id="btnAdd1" type="button" value="jquery添加數據" /><input id="btnAdd2" type="button" value="dom添加數據" /><input id="btnDel1" type="button" value="jquery刪除數據" /><input id="btnDel2" type="button" value="dom刪除數據" /><input id="btnInsert1" type="button" value="jquery插入數據" /><input id="btnInsert2" type="button" value="dom插入數據" /><input id="btnEdit1" type="button" value="jquery編輯數據" /><input id="btnEdit2" type="button" value="dom編輯數據" /></body></html>