添加，编辑和删除功能，我的javascript

Add, edit and delete function to my javascript

本文关键字：我的 javascript 功能 编辑 添加 删除      更新时间：2023-09-26

我正在寻找添加编辑和删除功能到以下JavaScript，我不确定从哪里开始。

这个功能很好，作为输入添加，但它需要是可编辑和可删除的。Javascript是解决之道吗?

HTML 

<table width="600px" class="setpoint-form-table">
        <tr>
            <td colspan="5">
                <p style="font-size:16px; float:left;">First Name / Last Name Table Post and Edit</p>
            </td>
        </tr>
        <tr>
            <td colspan="5" height="20px"></td>
        </tr>
        <tr>
            <input type="text" id="RowPlaceholder2" style="visibility:hidden;" />
            <td width="100px" style="font-size:14px">First Name</td>
            <td><input type="text" id="fName" class="setpoint-textbox" /></td>
            <td width="100px" style="font-size:14px;">Last Name</td>
            <td><input type="text" id="lName" class="setpoint-textbox" /></td>
            <td><button type="button" id="edit">Edit</button></td>

        </tr>
        <tr>
            <td colspan="5" height="20px"></td>
        </tr>
        <tr>
            <td colspan="5"><button type="button" onclick="HvacStandards()">Submit</button></td>
        </tr>
        <tr>
            <td colspan="5">
                <br />
                <br />

                <table width="600px" id="testingWithEdit">
                    <tr>
                        <td style="background-color:#fff; color:#00468C; border-bottom:1px solid #000; border-right:1px solid #000;">First Name</td>
                        <td style="background-color:#fff; color:#00468C; border-bottom:1px solid #000;">Last Name</td>
                    </tr>
                </table>

            </td>
        </tr>
    </table>




JavaScript 

function HvacStandards() {
  var rowID = document.getElementById("RowPlaceholder2").value;
  var firstName = document.getElementById("fName").value;
  var lastName = document.getElementById("lName").value;
  var sHtml = "<tr>" +
            "<td id='"firstName" + rowID + "'">" + firstName + "</td>" +
            "<td id='"lastName" + rowID + "'">" + lastName + "</td>" +
            "</tr>";
  $("#testingWithEdit").append(sHtml);
  rowID++;
  document.getElementById("RowPlaceholder2").value = rowID;
  document.getElementById("fName").value = "";
  document.getElementById("lName").value = "";
}

这只是众多方法中的一种:

在这里，我只是在sHTML中添加了一个额外的列，其中包含分别调用editRow()和deleteRow()的编辑和删除按钮，它们都传递rowID的参数。

然后我定义了两个新的全局变量，newRow和currentRow。然后，我修改了hvac标准，使用newRow作为RowID。此外，我修改了它，如果currentRow不是-1，则切换到saveEdits，这样点击提交按钮可以保存编辑，而不仅仅是创建一个新行。

然后我创建了editRow函数，用firstName + rowID和lastName + rowID中包含的html填充文本框，然后将currentRow设置为rowID。

saveEdits函数然后将表行的html修改为来自输入的新值，清除输入，然后将currentRow重置为-1，以便下一次点击submit将添加新行。

最后，deleteRow函数简单地从dom中删除行。(我在sHTML中为tr添加了一个id，以便可以识别整个行)

如果这一切都是有意义的，让我知道你需要它做什么:)

相关文章：