下面的代碼將用戶輸入的輸入值添加到我的 HTML 頁面中的表格中，并在每行中添加一個編輯和刪除按鈕：$("#btnAdd").on('click', function() { if($("#insert-image").val() !== '' && $("#insert-name").val() !== '' && $("#insert-surname").val() !== ''){ var imagePrep = $("#insert-image").val().replace(/C:\\fakepath\\/i, ''); let row = '<tr> <td>' + "image" + '</td> <td>' + $("#insert-name").val() + '</td> <td>' + $("#insert-surname").val() + '</td> <td>' + "edit" + '</td> <td>' + "delete" + '</td> </tr>' $('tbody').append(row); $('td:contains("edit")').html("<i class='fas fa-edit'></i>").addClass("text-center edit edit:hover"); $('td:contains("delete")').html("<i class='far fa-trash-alt'></i>").addClass("text-center delete delete:hover").attr("id", "btnDelete"); $('td:contains("image")').html(image).addClass("text-center"); }});如果用戶單擊一行的特定刪除按鈕，我需要該行來確認刪除，然后如果他們確認刪除，則必須刪除該特定行，但我不知道如何從表中刪除特定行是動態(tài)的，這是我到目前為止所得到的：$("#tbody").on('click','#btnDelete', function() { $("#delete-modal").modal('show');});$("#btnDeleteConfirmation").on('click', function() { $("btnDelete").parents("tr").remove();});任何幫助將非常感激。HTML表格代碼： <table class="table table-bordered"> <thead class="thead-dark"> <tr> <th scope="col">Image</th> <th scope="col">Name</th> <th scope="col">Surname</th> <th scope="col">Edit</th> <th scope="col">Delete</th> </tr> </thead> <tbody id="tbody"> </tbody> </table>
2 回答
搖曳的薔薇
TA貢獻1793條經驗 獲得超6個贊
您可以使用$(this).closest('tr').remove()這里的示例
$(".delete").on("click",function(){
$(this).closest('tr').remove();
})
.pointer{
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">Image</th>
<th scope="col">Name</th>
<th scope="col">Surname</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
<tr>
<td scope="col">1</td>
<td scope="col">1</td>
<td scope="col">1</td>
<td scope="col">Edit</td>
<td class="delete pointer" scope="col">Delete</td>
</tr>
<tr>
<td scope="col">2</td>
<td scope="col">2</td>
<td scope="col">2</td>
<td scope="col">Edit</td>
<td class="delete pointer" scope="col">Delete</td>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
慕蓋茨4494581
TA貢獻1850條經驗 獲得超11個贊
您想要在創(chuàng)建刪除按鈕的位置添加刪除按鈕的 onClick 處理程序。這樣您就可以使用“this-context”，這使得處理親戚父母或后代變得更容易。這是您的代碼的簡化示例，用于演示：
$("#btnAdd").on('click', function() {
if(
$("#insert-image").val() !== '' &&
$("#insert-name").val() !== '' &&
$("#insert-surname").val() !== ''
){
let row = '<tr><td>image</td><td>name</td><td>surname</td><td>edit</td><td>delete</td></tr>'
$('tbody').append(row);
$('td:contains("edit")').html('<button>edit</button')
$('td:contains("delete")').html('<button>delete</button>')
//Add your eventhandler here so u can use the parent of "this" button $(this).parent
.on('click', function() {
$(this).parents('tr').remove();
});
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">Image</th>
<th scope="col">Name</th>
<th scope="col">Surname</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<button id="btnAdd">Add</button>
- 2 回答
- 0 關注
- 181 瀏覽
添加回答
舉報
0/150
提交
取消