我有多个行中的多个编辑按钮，实际上它是按照数据库数据动态创建的，每行我都有EDIT和DELETE按钮，当点击编辑按钮时会更改为UPDATE和CANCEL，在我的应用程序中我可以编辑多个如果单击编辑按钮而没有保存以前的编辑或没有单击取消，我希望一次获得警告信息。
<div class="form view">
<div class="table-responsive">
<table class="table table-hover type-view-table">
<thead>
<tr>
<th>Categories</th>
<th>Types</th>
<th></th>
</tr>
</thead>
<?php
if(isset($_POST['table_product_view'])){
$result = $wpdb->get_results('SELECT id,category FROM '.$ps_detail_table_name, ARRAY_A);
foreach ($result as $value){ ?>
<tr id='catgry-row<?php echo $value['id']; ?>'>
<td id='catgry-name<?php echo $value['id']; ?>'><?php echo $value['category']; ?></td>
<td><button class='btn btn-primary btn-sm' id='edit-catgry<?php echo $value['id']; ?>' onclick=edit_category('<?php echo $value['id']; ?>');>Edit</button>
<button class='btn btn-danger btn-sm' id='delete-catgry<?php echo $value['id']; ?>' onclick=delete_category('<?php echo $value['id']; ?>');>Delete</button>
<button class='btn btn-primary btn-sm' style='display:none' id='update-catgry<?php echo $value['id']; ?>' onclick=update_category('<?php echo $value['id']; ?>');>Update</button>
<button class='btn btn-warning btn-sm' style='display:none' id='cancel-update-catgry<?php echo $value['id']; ?>' onclick=cancel_update_category('<?php echo $value['id']; ?>');>Cancel</button>
</td>
</tr>
<tbody id="table-type-view">
</tbody>
</table>
</div>
</div>
JQuery的
function edit_category(id) {
curent_edit_name = 'category';
curent_edit_id = id;
var catgry = document.getElementById("catgry-name"+id).innerHTML;
document.getElementById("catgry-name"+id).innerHTML = "<input type='text' id='catgry-new-name"+id+"' class='table-form-txt' value='"+catgry+"'>" +
"<input type='hidden' id='catgry-hdn-name"+id+"' value='"+catgry+"'/>";
document.getElementById("edit-catgry"+id).style.display="none";
document.getElementById("delete-catgry"+id).style.display="none";
document.getElementById("update-catgry"+id).style.display="inline";
document.getElementById("cancel-update-catgry"+id).style.display="inline";
}
function update_category(id){
var new_valu = document.getElementById("catgry-new-name"+id).value;
var old_name = document.getElementById("catgry-hdn-name"+id).value;
$.ajax({
type:'post',
url:ajaxurl,
data:{'action':'php_for_ajax_callback',
'old_ctgry_name':old_name,
'new_ctgry_name':new_valu
},
success:function (response) {
if(response=="success"){
document.getElementById("catgry-name"+id).innerHTML=new_valu;
document.getElementById("edit-catgry"+id).style.display="inline";
document.getElementById("delete-catgry"+id).style.display="inline";
document.getElementById("update-catgry"+id).style.display="none";
document.getElementById("cancel-update-catgry"+id).style.display="none";
}
}
});
}
function cancel_update_category(id) {
var catgry = document.getElementById("catgry-hdn-name"+id).value;
document.getElementById("catgry-name"+id).innerHTML=catgry;
document.getElementById("edit-catgry"+id).style.display="inline";
document.getElementById("delete-catgry"+id).style.display="inline";
document.getElementById("update-catgry"+id).style.display="none";
document.getElementById("cancel-update-catgry"+id).style.display="none";
curent_edit_name = '';
curent_edit_id = '';
}
如何使用Jquery oy Javascript
获取警告答案 0 :(得分：1)
这是我用jQuery完成的， 您可能想尝试这样：
var edit_clicks = 0;
$( function(){
$('button[id^=edit-catgry]').on('click', function(){
if( edit_clicks > 0 ) {
alert( "Update Or Cancel Previous row")
}
else {
++edit_clicks;
$(this).css('display','none');
$(this).siblings('button[id^=update-catgry-]').css('display','inline');
$(this).siblings('button[id^=cancel-update-catgry]').css('display','inline');
}
});
$('button[id^=cancel-update-catgry]').on('click', function(){
--edit_clicks;
$(this).siblings('button[id^=edit-catgry]').css('display','inline');
$(this).siblings('button[id^=update-catgry-]').css('display','none');
$(this).css('display','none');
});
$('button[id^=update-catgry]').on('click', function(){
--edit_clicks;
$(this).siblings('button[id^=edit-catgry]').css('display','inline');
$(this).siblings('button[id^=cancel-update-catgry-]').css('display','none');
$(this).css('display','none');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<button class='btn btn-primary btn-sm' id='edit-catgry-1' onclick=edit_category(1);>Edit</button>
<button class='btn btn-primary btn-sm' style='display:none' id='update-catgry-1' onclick=update_category(1);>Update</button>
<button class='btn btn-warning btn-sm' style='display:none' id='cancel-update-catgry-1' onclick=cancel_update_category(1);>Cancel</button>
</td>
</tr>
<tr>
<td>
<button class='btn btn-primary btn-sm' id='edit-catgry-2' onclick=edit_category(2);>Edit</button>
<button class='btn btn-primary btn-sm' style='display:none' id='update-catgry-2' onclick=update_category(2);>Update</button>
<button class='btn btn-warning btn-sm' style='display:none' id='cancel-update-catgry-2' onclick=cancel_update_category(2);>Cancel</button>
</td>
</tr>
<tr>
<td>
<button class='btn btn-primary btn-sm' id='edit-catgry-3' onclick=edit_category(3);>Edit</button>
<button class='btn btn-primary btn-sm' style='display:none' id='update-catgry-3' onclick=update_category(3);>Update</button>
<button class='btn btn-warning btn-sm' style='display:none' id='cancel-update-catgry-3' onclick=cancel_update_category(3);>Cancel</button>
</td>
</tr>
</table>
答案 1 :(得分：0)
以这种方式添加jquery listeners.，您可以控制何时单击某个元素并在用户执行某些操作时显示所需的警告，您可以将此侦听器用于许多事件。