添加，編輯和刪除功能到我的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() a nd deleteRow()分別通過rowID的參數。

然後我定義了兩個新的全局變量newRow和currentRow。然後我修改HvacStandards使用newRow作爲RowID。另外，如果currentRow不是-1，我修改它以切換到saveEdits，以便按下提交按鈕可以保存編輯，而不是隻創建一個新行。

然後我創建了editRow功能與包含在firstName + rowID和lastName + rowID的HTML填充文本框，然後設置currentRow到rowID。

然後，saveEdits函數將表格行的html修改爲輸入中的新值，清除輸入，然後將currentRow重置爲-1，因此按下submit將下一次添加新行。

最後，deleteRow函數只是從dom中刪除該行。 （我在tr的sHTML中添加了一個id，以便可以識別該行）。

讓我知道如果這一切都有道理，並做你需要它做:)