在實際開發中，經常要求對於載入的表格資料進行刪除，點選刪除的時候彈出模態框。再到模態框上點確定刪除。實現這一套邏輯很多中方法，我經常用的一種：

第一，頁面的資料表格是動態載入的

$("#table_result_per").append(
    "<tr>"+
"<td class='hidden'>"+list[i].id+"</td>"+
"<td>"+ parseInt(i+1)+"</td>"+
"<td>"+list[i].name+"</td>"+
"<td>"+list[i].cellphone
 
+"</td>"+
"<td>"+list[i].level+"</td>"+
"<td>"+list[i].area_name+"</td>"+
"<td>"+list[i].unit_type+"</td>"+
"<td>"+list[i].user_type+"</td>"+
"<td>"+list[i].position+"</td>"+
"<td class='td_remove hidden_btn'>"+"<a class='address_remove hidden_btn'" 
 
+
" onclick='deletePro(this)'>"+"</a>"+
"</td>"+ "</tr>"
);

function deletePro(e) {
    var id=$(e).parent().siblings().eq(0).text();
var position=$(".zjl_headCenter p:nth-child(1)").children().eq(4).text().trim().replace(/[\r\n]/g, '');
set_model_del();
 
//呼叫模態框
sessionStorage.removeItem('ud');
sessionStorage.setItem('ud',id);
$(e).parent().parent().attr('id',id);//給tr設定一個id
}

//刪除按鈕----將id傳到後臺並將該行刪除--第二步
function model_delete_id() {
    //關閉刪除模態框
cancel_model_del();
var ud=sessionStorage.getItem('ud');
var data={id:ud};
$.ajax({
        type:'post',
url:'../../../../index.php/contacts/search/delete.html',
data:data,
success:function (result) {
            if(result.code==1){
                // 呼叫模態框
$('#result_text').html('');
setByResult();
$('#result_text').html("刪除成功");
if($(`#table_result_city tr[id=${ud}]`)){
                    $(`#table_result_city tr[id=${ud}]`).remove();
}
                if($(`#table_result_per tr[id=${ud}]`)){
                    $(`#table_result_per tr[id=${ud}]`).remove();
}
                //點選刪除---刪除元素以後--將頁碼重新重新整理，並將資料重新顯示頁面
$('.max_page').text(result.info.last_page);
$('.max_page1').text(result.info.last_page);
$('.total_number1').text(result.info.total);
$('.total_number').text(result.info.total);
}else if(result.code==0){
                setByResult();
$('#result_text').html('');
$('#result_text').html(result.msg);
}
        },