0

我正在寻找向以下 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 = "";
}
4

1 回答 1

1

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

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

然后我定义了两个新的全局变量,newRowcurrentRow. 然后我修改了 HvacStandardsnewRow用作 RowID。此外,我修改它以切换到saveEditsif currentRowis not -1,以便点击提交按钮保存编辑,而不是仅仅创建一个新行。

然后我创建了用+和+editRow中包含的 html 填充文本框的函数,然后设置为.firstNamerowIDlastNamerowIDcurrentRowrowID

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

最后,该deleteRow函数只是从 dom 中删除该行。tr(我在in 中添加了一个 id,sHTML以便可以识别整个行)。

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

于 2013-05-22T04:20:54.873 回答