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()的编辑和删除按钮，两个都传递了{{1}的参数}。

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

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

然后currentRow函数将表行的html修改为输入中的新值，清除输入，然后将rowID重置为-1，这样点击提交将添加一个新行时间。

最后，saveEdits函数只是从dom中删除行。（我在currentRow中为deleteRow添加了一个ID，以便可以识别整个行。

让我知道这一切是否有意义并做你需要做的事情：）

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

1 个答案: