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

Question

我希望为以下 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 = "";
}

Answer 1

这只是执行此操作的众多方法之一：

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

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

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

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

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

让我知道这一切是否有意义并能满足您的需要：)