追加方法javascript/jqueryを使用して各行の編集と削除のボタン

Question

各行に編集と削除のボタンを追加し、javascriptを使って行を編集して削除したいと思います。私はこれをどうすればよいのですか？下のjsfiddleを確認してください。

First Name:<br> 
<input type="text" id="fName" /><br> 
Last Name: <br> 
<input type="text" id="lName" /><br> 
Gender: <br> 
<input type="text" id="gender" /><br> 
Age: <br> 
<input type="text" id ="age" /> <br> 
<input type="button" id ="display" value="Display" /><br> 
<table id= "table" border="1"> 
<tr> 
<th>Name</th> 
<th>Gender</th> 
<th>Age</th> 
</tr> 
</table> 

javascriptのあなたが再移植を受けるフィールドを編集]をクリックし、次にあなたが問題を解決するために、再度 '表示' をクリックすると、jQueryのを使用して終了

(function setup() { 
    "use strict"; 

var fNameElem = document.getElementById("fName"); 
var lNameElem = document.getElementById("lName"); 
var genderElem = document.getElementById("gender"); 
var ageElem = document.getElementById("age"); 
var tableElem = document.getElementById("table"); 
document.getElementById("display").addEventListener("click", function() { 
    var newRow = tableElem.insertRow(-1); 
    var newCell = newRow.insertCell(0); 
    var newText = document.createTextNode(lNameElem.value + ", " + fNameElem.value); 
    newCell.appendChild(newText); 
    newCell = newRow.insertCell(1); 
    newText = document.createTextNode(genderElem.value); 
    newCell.appendChild(newText); 
    newCell = newRow.insertCell(2); 
    newText = document.createTextNode(ageElem.value); 
    newCell.appendChild(newText); 
    fNameElem.value = ""; 
    lNameElem.value = ""; 
    ageElem.value = ""; 
    tableElem.value = ""; 
}); 
})(); 

http://jsfiddle.net/xnWSV/

Answer 1

。これは非常に単純な実装ですが、これを拡張しようとするなら、Angularや何らかの種類のテンプレートライブラリを使うことをお勧めします。

http://jsbin.com/jevejetofo/edit?html,js,console,output

はJavaScript：

(function setup() { 
    var selectedRow = null; 
    var keys = ["fName","lName","gender","age"]; 

    function resetValues(fName,lName,gender,age){ 
     forEachInput(function(key){ 
      $("#"+key).val(''); 
     }); 
    } 

    function forEachInput(callback){ 
     for(var i = 0; i < keys.length; i++) { 
      callback(keys[i]); 
     } 
    } 

    function createRow(){ 
     var row = $(".tr_clone").clone() 
     var newRow = row.appendTo("table").removeClass("tr_clone").fadeIn(1000); 
     forEachInput(function(key){ 
      newRow.find("."+key).text($("#"+key).val()); 
     }); 
     resetValues(); 
     selectedRow = null; 
    } 

    function applyValues(row){ 
     forEachInput(function(key){ 
      row.find("."+key).text($("#"+key).val()); 
     }); 
    } 


    function editRow(row){ 
     forEachInput(function(key){ 
      $("#"+key).val(row.find("."+key).text()); 
     }); 
     selectedRow = row; 
    } 

    $("#display").on("click", function() { 
     if(selectedRow === null){ 
      createRow(); 
      resetValues(); 
     } else { 
      applyValues(selectedRow); 
      resetValues(); 
      selectedRow = null; 
     } 
    }); 

    $("table").delegate("button").on("click",function(e){ 
     e.preventDefault(); 
     if($(e.target).hasClass('edit')){ 
      editRow($(e.target).parent("td").parent("tr")); 
     } else { 
      $(e.target).parent("td").parent("tr").fadeOut(1000).remove();    
     } 
    }); 

})(); 

HTML

<script src="https://code.jquery.com/jquery-2.0.3.js"></script>First Name:<br> 
<input type="text" id="fName" /><br> 
Last Name: <br> 
<input type="text" id="lName" /><br> 
Gender: <br> 
<input type="text" id="gender" /><br> 
Age: <br> 
<input type="text" id ="age" /> <br> 
<input type="button" id="display" value="Display" /><br> 
<table id= "table" border="1"> 
<tr> 
<th>First Name</th> 
    <th>Last Name</th> 
<th>Gender</th> 
<th>Age</th> 
</tr> 

     <tr class="tr_clone" style="display:none;"> 
     <td class="fName"></td> 
     <td class="lName"><input type="text" autofocus placeholder="location" name="location" ></td> 
     <td class="gender"><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td> 
     <td class="age"><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td> 
     <td class="buttons"><button class="delete">Delete</button> | <button class="edit">Edit</button></td> 
    </tr> 
</table>