{"id":77657,"date":"2024-09-22T21:52:35","date_gmt":"2024-09-22T18:22:35","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/crud-es-jshtmlcss-14mn\/"},"modified":"2024-09-22T21:52:35","modified_gmt":"2024-09-22T18:22:35","slug":"crud-es-jshtmlcss-14mn","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/crud-es-jshtmlcss-14mn\/","title":{"rendered":"crud es js,html,css &#8211; \u0627\u0646\u062c\u0645\u0646 DEV"},"content":{"rendered":"<div data-article-id=\"2010368\" id=\"article-body\">\n<p><strong>Html<\/strong><\/p>\n<p>\u0628\u0631\u0646\u0627\u0645\u0647 CRUD<\/p>\n<p>\u0646\u0627\u0645:<\/p>\n<p>\u062a\u0648\u0636\u06cc\u062d\u0627\u062a:<\/p>\n<p>\u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f<\/p>\n<pre class=\"highlight plaintext\"><code><script src=\"https:\/\/dev.to\/carolina_gomez_d5212ad1f3\/script.js\"\/>\n<\/code><\/pre>\n<p><strong>Css<\/strong><br \/>\u0628\u062f\u0646 {<br \/>font-family: Arial, sans-serif;<br \/>}<\/p>\n<pre class=\"highlight plaintext\"><code>border-collapse: collapse;\nwidth: 100%;\n<\/code><\/pre>\n<p>}<\/p>\n<pre class=\"highlight plaintext\"><code>border: 1px solid #ddd;\npadding: 10px;\ntext-align: left;\n<\/code><\/pre>\n<p>}<\/p>\n<pre class=\"highlight plaintext\"><code>background-color: #f0f0f0;\n<\/code><\/pre>\n<p>}<\/p>\n<p><strong>Jss<\/strong><br \/>\/\/ \u0641\u0631\u0645 \u0648 \u0639\u0646\u0627\u0635\u0631 \u062c\u062f\u0648\u0644 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f<br \/>const form = document.getElementById(&#39;create-form&#39;);<br \/>const table = document.getElementById(&#39;item-table&#39;);<br \/>const itemList = document.getElementById(&#39;item-list&#39;);<\/p>\n<p>\/\/ \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u062e\u0627\u0644\u06cc \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0622\u06cc\u062a\u0645 \u0647\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f<br \/>\u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f \u0622\u06cc\u062a\u0645 \u0647\u0627 = [];<\/p>\n<p>\/\/ \u062a\u0627\u0628\u0639 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u0622\u06cc\u062a\u0645 \u062c\u062f\u06cc\u062f<br \/>\u062a\u0627\u0628\u0639 createItem (\u0646\u0627\u0645\u060c \u062a\u0648\u0636\u06cc\u062d\u0627\u062a) {<br \/>const item = { name, description };<br \/>items.push(item);<br \/>renderItems();<br \/>}<\/p>\n<p>\/\/ \u062a\u0627\u0628\u0639 \u0631\u0646\u062f\u0631 \u0622\u06cc\u062a\u0645 \u0647\u0627 \u062f\u0631 \u062c\u062f\u0648\u0644<br \/>\u062a\u0627\u0628\u0639 renderItems() {<br \/>itemList.innerHTML = &#39;&#39;;<br \/>items.forEach((item) => {<br \/>const row = document.createElement(&#39;tr&#39;);<br \/>row.innerHTML = <code><\/p>\n<td>${item.name}<\/td>\n<p><\/p>\n<td>${item.description}<\/td>\n<p><\/p>\n<td><button class=\"edit-btn\">Edit<\/button><br \/><button class=\"delete-btn\">Delete<\/button><\/td>\n<p><\/code>;<br \/>itemList.appendChild(row);<br \/>})\u061b<br \/>}<\/p>\n<p>\/\/ \u062a\u0627\u0628\u0639 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u06cc\u06a9 \u0645\u0648\u0631\u062f<br \/>\u062a\u0627\u0628\u0639 editItem(index) {<br \/>\u0627\u0642\u0644\u0627\u0645 const = \u0622\u06cc\u062a\u0645[index];<br \/>\/\/ TO DO: \u0627\u062c\u0631\u0627\u06cc \u0642\u0627\u0628\u0644\u06cc\u062a \u0648\u06cc\u0631\u0627\u06cc\u0634<br \/>}<\/p>\n<p>\/\/ \u062a\u0627\u0628\u0639 \u062d\u0630\u0641 \u06cc\u06a9 \u0645\u0648\u0631\u062f<br \/>\u062a\u0627\u0628\u0639 deleteItem(index) {<br \/>items.splice(index, 1);<br \/>renderItems();<br \/>}<\/p>\n<p>\/\/ \u0634\u0646\u0648\u0646\u062f\u06af\u0627\u0646 \u0631\u0648\u06cc\u062f\u0627\u062f \u0631\u0627 \u0628\u0647 \u0641\u0631\u0645 \u0648 \u062c\u062f\u0648\u0644 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f<br \/>form.addEventListener(&#39;submit&#39;, (e) => {<br \/>e.preventDefault();<br \/>const name = document.getElementById(&#39;name&#39;).value;<br \/>const description = document.getElementById(&#39;description&#39;).value;<br \/>createItem (\u0646\u0627\u0645\u060c \u062a\u0648\u0636\u06cc\u062d\u0627\u062a)\u061b<br \/>})\u061b<\/p>\n<p>table.addEventListener(&#39;click&#39;, (e) => {<br \/>if (e.target.classList.contains(&#39;edit-btn&#39;)) {<br \/>const index = e.target.parentNode.parentNode.rowIndex - 1;<br \/>editItem(index);<br \/>} else if (e.target.classList.contains(&#39;delete-btn&#39;)) {<br \/>const index = e.target.parentNode.parentNode.rowIndex - 1;<br \/>\u062d\u0630\u0641 \u0622\u06cc\u062a\u0645 (\u0634\u0627\u062e\u0635)\u061b<br \/>}<br \/>})\u061b<\/p>\n<p>\/\/ \u0628\u0631\u0646\u0627\u0645\u0647 \u0631\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc \u06a9\u0646\u06cc\u062f<br \/>renderItems();<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Html \u0628\u0631\u0646\u0627\u0645\u0647 CRUD \u0646\u0627\u0645: \u062a\u0648\u0636\u06cc\u062d\u0627\u062a: \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f Css\u0628\u062f\u0646 {font-family: Arial, sans-serif;} border-collapse: collapse; width: 100%; } border: 1px solid #ddd; padding: 10px; text-align: left; } background-color: #f0f0f0; } Jss\/\/ \u0641\u0631\u0645 \u0648 \u0639\u0646\u0627\u0635\u0631 \u062c\u062f\u0648\u0644 \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062fconst form = document.getElementById(&#39;create-form&#39;);const table = document.getElementById(&#39;item-table&#39;);const itemList = document.getElementById(&#39;item-list&#39;); \/\/ \u06cc\u06a9 \u0622\u0631\u0627\u06cc\u0647 \u062e\u0627\u0644\u06cc \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u0622\u06cc\u062a\u0645 \u0647\u0627 \u0631\u0627\u0647 \u0627\u0646\u062f\u0627\u0632\u06cc &hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-77657","post","type-post","status-publish","format-standard","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/77657","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=77657"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/77657\/revisions"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=77657"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=77657"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=77657"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}