如何使用javascript在表格中動態插入“編輯”和“刪除”按鈕，並再次在表格中填充數據

Question

我做了一個html5表單。 我在JavaScript中使用對象數組。 我將用戶輸入存儲在數組中。 但是我在某些功能上失敗了。

1. 我想在表格中動態插入“編輯”和“刪除”按鈕。 這樣，當用戶單擊“編輯”按鈕時，數據就會以上述html形式填充，進行編輯並在同一行中提交更新的數據。
2. 我想插入刪除按鈕，以便在單擊“刪除”按鈕時，應刪除相同的行數據。 該條目也應從陣列中刪除。
3. 我想為每一行動態生成“ ID”，以便在刪除“ Id”將更新的任何記錄之后。

你能給我解決方法嗎？ 如何生成這些功能？ 我應該在JavaScript中添加哪些額外的代碼？

 $(document).ready(function() { $('#button').click(function() { if ($('#firstName').val() == '') { $('#error').html('Please fill the FirstName details.'); $('#error').css('color', 'red'); } else if ($('#lastName').val() == '') { $('#error').html('Please fill the LastName details.'); $('#error').css('color', 'red'); } else if ($('#DOB').val() == '') { $('#error').html('Please fill the date of birth details.'); $('#error').css('color', 'red'); } else if ($('#image').val() == '') { $('#error').html('Please upload the image'); $('#error').css('color', 'red'); } else { $('#error').html(''); var firstname = document.getElementById('firstName').value; var lastname = document.getElementById('lastName').value; var dob = document.getElementById('DOB').value; var image = document.getElementById('image'); var imgName = image.files[0].name; var id = 0; var table = { firstName: firstname, lastName: lastname, dob: dob, image: imgName }; var tableContaint = []; tableContaint.push(table); for (var i = 0; i < tableContaint.length; i++) { $('#list tbody').prepend("<tr><td>" + id + "</td><td>" + tableContaint[0].firstName + "</td><td>" + tableContaint[0].lastName + "</td><td>" + tableContaint[0].dob + "</td><td>" + tableContaint[0].image + "</td><td>" + "<input type='button' id='edit' value='edit' onclick ='ValidateEdit()'>&nbsp&nbsp<input type='button' id='delete' value='delete'/>" + "</td></tr>") } $('.form').val(''); } $('.form').val(''); }); }); 

 .form { display: inline; width: 20%; /* height: 34px; */ padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; } #submit { text-align: center; } .button { position: absolute; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="container"> <center> <h1> Fill This Form </h1> </center> <p id='error' align="center"> <form id='myForm' value='reset'> <div align="center" class="form-group"> <label for="firstName">First-Name:- </label> <input type="text" class="form" id='firstName'> </div> <div align="center" class="form-group"> <label for="lastName">Last-Name:- </label> <input type="text" class="form" id="lastName"> </div> <div align="center" class="form-group"> <label for="DOB"> DATE OF BIRTH:-</label> <input type="date" class="form" id="DOB"> <span><input type="text" class="form" disabled></span> </div> <div align="center" class="form-group"> <label for="image">Your Image </label> <input type="file" class="form" id="image" style="display:inline"> </div> <div id="submit"> <input type="button" id="button" value="submit"></input> </div> </form> </div> <div class="container"> <h2>Resulted Table</h2> <table id="list" class="table table-bordered"> <thead> <tr> <th> ID </th> <th>Firstname</th> <th>Lastname</th> <th>Date Of Birth</th> <th> Image </a> </th> <th> </th> </tr> </thead> </table> </div> 

Answer 1

您需要修改html和jquery。 第43行：您以<tr>開始，但以</th>結尾（第49行）。 您應該以</tr>結尾。 第50行：將<th></th>替換為<tbody></tbody> 。 在您的jquery（第41行prepend()中使用append()而不是prepend() ）。 預習