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