如何使用javascript/jquery在每一行添加编辑和删除按钮

How to add Edit and delete button in each row using javascript/jquery

本文关键字：添加 一行 编辑 按钮 删除 javascript 何使用 jquery      更新时间：2023-09-26

我想在每一行添加编辑和删除按钮，并希望使用javascript编辑和删除行。我该怎么做呢?

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 

(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/

最终使用jQuery，如果你点击编辑字段得到重新填充，然后你点击'显示'再次解决问题。这是一个非常简单的实现，但如果你要扩展它，我建议你使用Angular或其他模板库。

http://jsbin.com/jevejetofo/edit?html, js、控制台、输出

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>
相关文章：