如何从表中的行删除jQuery数组中的特定对象？

我有一个表格。当我点击提交按钮时，我创建了一个包含表单元素的对象。然后我将这些对象推送到一个数组中。如何从表中的行删除jQuery数组中的特定对象？

当我点击删除按钮时，我想要做的是从该数组及其从表中删除相关对象。并且在点击更新按钮时更新该对象。我怎样才能做到这一点？

索引页：

<!DOCTYPE html> 

<html> 
    <head> 
     <title>Person Record</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="shortcut icon" href=""> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

    </head> 
    <body> 
     <form id="personForm"> 
      <div> 
       <label for="firstname">Firstname:</label> 
       <input type="text" id="firstname" name="firstname" value="" placeholder="Firstname"/> 
      </div> 
      <div> 
       <label for="lastname">Lastname:</label> 
       <input type="text" id="lastname" name="lastname" value="" placeholder="Lastname"/> 
      </div> 
      <div> 
       <label for="tc">TC:</label> 
       <input type="tel" id="tc" name="tc" value="" placeholder="TC"/> 
      </div> 
      <div> 
       <label for="birthday">Birthday:</label> 
       <input type="date" id="birthday" name="birthday" /> 
      </div> 
      <div> 
       <input type="button" value="Submit" id="submitButton" /> 
      </div> 
     </form> 

     <div id="table"> 
      <h3>People List</h3> 
      <table id="personTable" border="1"> 
       <thead> 
        <tr> 
         <th> Firstname</th> 
         <th> Lastname</th> 
         <th> TC </th> 
         <th> Birthday </th> 
        </tr> 
       </thead> 
       <tbody> 
       </tbody> 
      </table> 
     </div> 

     <script type="text/javascript" src="main.js"></script> 
    </body> 
</html>

main.js：

var obj = {}; 
var data, i; 
var personArray = []; 

$("#submitButton").click(function() { 
    addButton(); 
    addTable(); 
}); 

function addButton() { 
    data = $('#personForm').serializeArray(); 
    for (i = 0; i < data.length; i++) { 
     obj[data[i].name] = data[i].value; 
    } 
    personArray.push(obj); 
} 

function addTable() { 
    if (personArray.length > 0) { 
     $('table#personTable tbody').append('<tr><td>' + obj['firstname'] + '</td><td>' + obj['lastname'] + '</td><td>' + obj['tc'] + '</td><td>' + obj['birthday'] + '</td><td><button id="deleteButton">Delete</button></td><td><button id="updateButton">Update</button></td></tr>'); 
    } 
    $("#deleteButton").click(function() { 
     $(this).parent().parent().remove(); //Only deletes first row! I want to delete relative row an object 
    }); 
} 
$("#firstname").val(''); 
$("#lastname").val(''); 
$("#tc").val(''); 
$("#birthday").val('');

来源

2017-02-19 Furkan

有重复的 '身份证'（#deleteButton）。
按类编辑ID按钮。新功能：

function addTable() { 
if (personArray.length > 0) { 
    $('table#personTable tbody').append('<tr><td>' + obj['firstname'] + '</td><td>' + obj['lastname'] + '</td><td>' + obj['tc'] + '</td><td>' + obj['birthday'] + '</td><td><button class="deleteButton">Delete</button></td><td><button id="updateButton">Update</button></td></tr>'); 
} 
$(".deleteButton").click(function() { 
    $(this).parent().parent('tr').remove(); //Only deletes first row! I want to delete relative row an object 
}); 
}

来源

2017-02-19 16:44:44

非常感谢它的工作。但是我怎样才能从数组中删除？ – Furkan

下面是完整的解决方案

var obj = {}; 
var data, i; 
var personArray = []; 

$("#submitButton").click(function() { 
    addButton(); 
    addTable(); 
}); 

function addButton() { 
    data = $('#personForm').serializeArray(); 
    for (i = 0; i < data.length; i++) { 
     obj[data[i].name] = data[i].value; 
    } 
    personArray.push(obj); 
} 

function addTable() { 
    if (personArray.length > 0) { 
     $('table#personTable tbody').append('<tr><td>' + obj['firstname'] + '</td><td>' + obj['lastname'] + '</td><td>' + obj['tc'] + '</td><td>' + obj['birthday'] + '</td><td><button class="deleteButton" id="deleteRow-'+personArray.length+'">Delete</button></td><td><button id="updateButton">Update</button></td></tr>'); 
    } 
    $(".deleteButton").click(function() { 
     var id = $(this).attr('id'); 
     $("#"+id).parent().parent('tr').remove(); //Only deletes first row! I want to delete relative row an object 
     var ind = id.split('-'); 
     personArray.splice(ind[1]-1,1); 
    }); 
} 
$("#firstname").val(''); 
$("#lastname").val(''); 
$("#tc").val(''); 
$("#birthday").val('');

来源

2017-02-19 18:07:11

console.log（personArray）删除按钮点击功能有些问题。 – Furkan

如何从表中的行删除jQuery数组中的特定对象？

回答

相关问题