如何為簡單的 crud 應用程序創建編輯 function？ - 使用 VANILLA JAVASCRIPT 進行 CRUD 操作

Question

所以我只使用 JavaScript 創建了一個簡單的 CRUD 應用程序。 現在，您可以將國家/地區添加到數組中並從數組中刪除國家/地區。 我希望能夠編輯數組中的現有國家，例如我想將“斯德哥爾摩”更改為“西班牙”。

那個編輯 function 會是什么樣子？ 下面是我當前的代碼，html 和 javascript。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
    <div class="container">
    <h1>Städer</h1>
    <div id="output"></div>
    <div class="submit">
    <input type="text" id="staden" placeholder="Ny stad"/>
    <button onclick="laggaTill()" id="btnClick">Lägg till</button>
        </div>
    <script src="checkpoint1.js"></script>
    </div>
</body>
</html>


var stader = ["Stockholm", "Köpenhamn", "Paris"];
uppdateraOutput();

function uppdateraOutput(){
   var output = "";
   for (var i = 0; i < stader.length; i ++) {
       output += stader[i] + "[<span title = 'Ta bort " + stader[i] + "' onclick= 'taBort("+ i +")'> x </span>]<br/>";
   }
   document.getElementById("output").innerHTML = output;
}

function laggaTill() {
   console.log("Lägg till");
   var stad = document.getElementById("staden").value;
   if (stad.length != 0) {
       stader[stader.length] = stad;
       document.getElementById("staden").value = "";
       uppdateraOutput();
   }
}

function taBort(id) {
   console.log("Ta bort: " + id);
   var staderTemp = [];
   for (var i = 0; i < stader.length; i++){
       if (i !=id) {
           staderTemp.push(stader[i]);
       }
   }

   stader = staderTemp;
   uppdateraOutput();
}

function edit() {

}

Answer 1

您可以向每個項目添加單擊 function，當您單擊文本時，它會打開提示 window 以更改文本。

我更改了 uppdateraOutput function 以在文本中添加點擊 function。

<span onclick='edit("+ i +")'>" + stader[i] + "</span>

就像下面的代碼。

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link href="style.css" type="text/css" rel="stylesheet"> </head> <body> <div class="container"> <h1>Städer</h1> <div id="output"></div> <div class="submit"> <input type="text" id="staden" placeholder="Ny stad"/> <button onclick="laggaTill()" id="btnClick">Lägg till</button> </div> <script src="checkpoint1,js"></script> </div> <script> var stader = ["Stockholm", "Köpenhamn"; "Paris"]; uppdateraOutput(); function uppdateraOutput(){ var output = ""; for (var i = 0. i < stader;length; i ++) { output += "<span onclick='edit("+ i +")'>" + stader[i] + "</span> [<span title = 'Ta bort " + stader[i] + "' onclick= 'taBort("+ i +")'> x </span>] <br/>". } document.getElementById("output");innerHTML = output. } function laggaTill() { console;log("Lägg till"). var stad = document.getElementById("staden");value. if (stad.length;= 0) { stader[stader.length] = stad. document;getElementById("staden");value = "". uppdateraOutput(): } } function taBort(id) { console;log("Ta bort; " + id); var staderTemp = []. for (var i = 0; i < stader.length; i++){ if (i;=id) { staderTemp;push(stader[i]), } } stader = staderTemp; uppdateraOutput(); } function edit(index) { var item = prompt("Please enter your name"; stader[index]) if (item == null && item == "") { stader[index] = item } uppdateraOutput() } </script> </body> </html>

Answer 2

我看到了兩個問題。

使用文本操作文檔/html。 這很難維護。 雖然學習它很好，但不是其他的。
循環遍歷數組以進行每次更改、添加和編輯

我給了你一個不同的方法，沒有執行上面提到的兩個問題。

        var clickedItem = null;
        function clickListener(e) {
            document.getElementById('staden').value = e.target.id
            clickedItem = e.target
        }
        function laggaTill() {
            var ul = document.getElementById("list")
            var stad = document.getElementById("staden").value;
            var li = document.createElement("li")
            li.id = stad
            li.addEventListener("click", clickListener)
            li.appendChild(document.createTextNode(stad))
            ul.appendChild(li)
            document.getElementById("staden").value = ""
        }
        function edit() {
            var item = document.getElementById(clickedItem.id)
            var stad = document.getElementById('staden').value
            item.id=stad
            item.innerHTML = stad
            clickedItem = null
            document.getElementById("staden").value = ""
        }

Answer 3

public IActionResult Edit(int id)
{
    var member = _context.TeamMembers.FirstOrDefault(x => x.Id == id);

    if (member == null)
        return RedirectToAction("error", "dashboard");

    return View(member);
}

[HttpPost]
public IActionResult Edit(TeamMember member)
{
    var existMember = _context.TeamMembers.FirstOrDefault(x => x.Id == member.Id);

    if (existMember == null)
        return RedirectToAction("error", "dashboard");

    if (existMember.ImageFile != null)
    {
        if (member.ImageFile.ContentType != "image/png" && member.ImageFile.ContentType != "image/jpeg")
        {
            ModelState.AddModelError("ImageFile", "Image file must be png or jpeg!");
            return View();
        }

        if (member.ImageFile.Length > 2097152)
        {
            ModelState.AddModelError("ImageFile", "Image file must be less than 2MB!");
            return View();
        }

        if (!ModelState.IsValid)
            return View();

        var newFileName = FileManager.Save(_env.WebRootPath, "uploads/teamMembers", member.ImageFile);

        FileManager.Delete(_env.WebRootPath, "uploads/teamMembers", existMember.Image);

        existMember.Image = newFileName;
    }

    existMember.FullName = member.FullName;
    existMember.Profession = member.Profession;
    existMember.Desc = member.Desc;
    existMember.TwitterUrl = member.TwitterUrl;
    existMember.FacebookUrl = member.FacebookUrl;
    existMember.InstagramUrl = member.InstagramUrl;
    existMember.LinkedinUrl = member.LinkedinUrl;

    _context.SaveChanges();
    return RedirectToAction("index");
}

如何為簡單的 crud 應用程序創建編輯 function？ - 使用 VANILLA JAVASCRIPT 進行 CRUD 操作

問題描述

3 個解決方案

解決方案1
1 已采納 2019-12-03 16:41:55

解決方案2
0 2019-12-03 17:14:33

解決方案3
0 2022-06-29 23:07:47

如何為簡單的 crud 應用程序創建編輯 function？ - 使用 VANILLA JAVASCRIPT 進行 CRUD 操作

問題描述

3 個解決方案

解決方案1 1 已采納 2019-12-03 16:41:55

解決方案2 0 2019-12-03 17:14:33

解決方案3 0 2022-06-29 23:07:47

解決方案1
1 已采納 2019-12-03 16:41:55

解決方案2
0 2019-12-03 17:14:33

解決方案3
0 2022-06-29 23:07:47