使用 JQuery 隐藏页面上的按钮
Posted
技术标签:
【中文标题】使用 JQuery 隐藏页面上的按钮【英文标题】：Hide button on the page using JQuery 【发布时间】：2020-11-22 23:12:30 【问题描述】：我在 JQuery 中遇到问题。场景是我在模态弹出窗口中有一个删除按钮。当我单击该按钮时，将打开确认弹出窗口。如果我单击确定按钮，我想禁用删除按钮。我已经写了一些 JQuery，但这不适用于这个。
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Mark To Seller Confirmation</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure? You will not be able to edit or delete this order any more. Continue?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" onclick="seller()">Ok</button>
</div>
</div>
</div>
<script>
var dataTable;
$(document).ready(function ()
dataTable = $("#tableId").DataTable(
"ajax":
"url": "/Home/GetAllPurchaseOrder",
"type": "GET",
"datatype": "json"
,
"columns": [
"data": "PurchaseID", "autowidth": true ,
"data": "SupplierID", "autowidth": true ,
"data": "SupplierName", "autowidth": true ,
"data": "Currency", "autowidth": true ,
"data": "TotalAmount", "autowidth": true ,
"data": "Date_Of_Purchase", "autowidth": true ,
"data": "Due_Date", "width": "56px" ,
"data": "PurchaseID", "width": "50px", "render": function (data)
return '<button class="btn btn-danger" id="DeletePurchase" onclick="Delete(' + data + ')">Delete</button>'
,
"data": "PurchaseID", "width": "50px", "render": function (data)
return '<button class="btn btn-success" id="ViewPurchase" onclick="Display(' + data + ')">View</button>'
]
);
);
function getpurchase()
$.get("/Home/GetPurchasePartial", function (res)
$("#purchaseModalBody").html(res);
$("#purchaseModal").modal('show');
)
function geteditpurchase(PurchaseID)
$.get("/Home/GetEditPurchasePartial", PurchaseID: PurchaseID , function (res)
$("#EditpurchaseModalBody").html(res);
$("#EditpurchaseModal").modal('show');
)
function CreateOrUpdate()
var modal = $("#purchaseModal");
var form = $('form[name="purchaseForm"]');
let tableData = $('#detailsTable > tbody > tr');
console.log(tableData);
var tableDto = [];
$.each(tableData, function (rindex, row)
console.log(row);
debugger;
let tmp = ;
tmp.pid = $(row).find('td:nth-child(1)').attr('pid');
tmp.productName = $(row).find('td:nth-child(1)').text().trim();
tmp.qty = $(row).find('td:nth-child(2)').text();
tmp.price = $(row).find('td:nth-child(3)').text();
tmp.amount = $(row).find('td:nth-child(4)').text();
tableDto.push(tmp);
tmp = ;
);
var form = $('#purchaseForm');
var purchaseDt = ;
purchaseDt.supplierName = $('#Supplier_ID option:selected').text();
purchaseDt.supplierID = $('#Supplier_ID option:selected').val();
purchaseDt.currency = $('#Currency option:selected').text();
purchaseDt.TotalAmount = $("#totalamount").val();
purchaseDt.Date_Of_Purchase = $("#datepicker").val();
purchaseDt.Due_Date = $("#datepicker1").val();
purchaseDt.Date_Departed = $("#datepicker2").val();
purchaseDt.Date_Arrived = $("#datepicker3").val();
purchaseDt.TotalQuantity = $("#totalquantity").val();
purchaseDt.Packaging_Cost = $("#Packaging_Cost").val();
purchaseDt.Inspection_Cost = $("#Inspection_Cost").val();
purchaseDt.Freight_Cost = $("#Freight_Cost").val();
purchaseDt.Other_Cost = $("#Other_Cost").val();
purchaseDt.TotalOtherCost = $(".totalothercost").val();
purchaseDt.TotalCost = $(".totalcost").val();
$.post('/Home/CreateOrUpdatePurchase',
purchase: purchaseDt,
tableListDto: tableDto
).done(function (result)
GetMessage(result.message);
).fail(function ()
window.location.href = "";
);
form.validate();
if (!form.valid())
return;
else
var data = form.serialize();
$.post("/Home/CreateOrUpdatePurchase", data, function (res)
if (res)
modal.modal('hide');
dataTable.ajax.reload();
$.notify("Saved Successfully",
className: "success",
globalPosition: 'top - center'
);
)
function Update()
var modal = $("#EditpurchaseModal");
var form = $('form[name="UpdatePurchaseForm"]');
form.validate();
if (!form.valid())
return;
else
var data = form.serialize();
$.post("/Home/UpdatePurchase", data, function (res)
if (res)
modal.modal('hide');
dataTable.ajax.reload();
$.notify("Update Successfully",
className: "success",
globalPosition: 'top - center'
);
)
function Delete(id)
if (confirm("Are you sure ?") == true)
$.get("/Home/DeletePurchase", id: id , function (res)
if (res)
dataTable.ajax.reload();
$.notify("Deleted Successfully",
className: "success",
globalPosition: 'top - center'
);
)
function Display(id)
if (confirm("Are you sure ?") == true)
$.get("/Home/DisplayPurchase", id: id , function (res)
if (res)
dataTable.ajax.reload();
$.notify("Update Successfully",
className: "success",
globalPosition: 'top - center'
);
)
function seller()
alert("Ankur");
var dataTable1 = $("#tableId").DataTable();
dataTable1.columns('delete').remove();
var modal = $("#purchaseModal");
var form = $('form[name="purchaseForm"]');
let tableData = $('#detailsTable > tbody > tr');
console.log(tableData);
var tableDto = [];
$.each(tableData, function (rindex, row)
debugger;
console.log(row);
let tmp = ;
tmp.pid = $(row).find('td:nth-child(1)').attr('pid');
tmp.productName = $.trim($(row).find('td:nth-child(1)').text());
tmp.qty = $(row).find('td:nth-child(2)').text();
tmp.price = $(row).find('td:nth-child(3)').text();
tmp.amount = $(row).find('td:nth-child(4)').text();
tableDto.push(tmp);
tmp = ;
);
var form = $('#purchaseForm');
var purchaseDt = ;
purchaseDt.purchaseID = $('#PurchaseID').val();
purchaseDt.supplierName = $('#Supplier_ID option:selected').text();
purchaseDt.supplierID = $('#Supplier_ID option:selected').val();
purchaseDt.currency = $('#Currency option:selected').text();
purchaseDt.amount = $(".totalamount").val();
purchaseDt.Date_Of_Purchase = $("#datepicker").val();
purchaseDt.Due_Date = $("#datepicker1").val();
purchaseDt.Date_Departed = $("#datepicker2").val();
purchaseDt.Date_Arrived = $("#datepicker3").val();
purchaseDt.TotalQuantity = $("#totalquantity").val();
$.post('/Home/MarkToSeller',
purchase: purchaseDt,
tableListDto: tableDto
).done(function (result)
).fail(function ()
window.location.href = "";
);
form.validate();
if (!form.valid())
return;
else
var data = form.serialize();
$.post("/Home/MarkToSeller", data, function (res)
if (res)
modal.modal('hide');
$("#purchaseModal").modal('hide');
dataTable.ajax.reload();
$.notify("Saved Successfully",
className: "success",
globalPosition: 'top - center'
);
)
$("#DeletePurchase").hide();
</script>
这是有助于理解场景的输出。 screen1 screen2
【问题讨论】：
【参考方案1】：只需使用 jquery hide() 函数即可：
$("#DeletePurchase").hide();
数据表更新
DataTables 中的按钮可以通过它自己的函数来移除。请按以下方式进行：
var table = $('#myTableId').DataTable();
table.button( 'index' ).remove();
这里的'index'是DataTable中的列索引。在你的情况下，我认为应该是 7。
【讨论】：
首先，检查你的seller()函数是否工作？将 alert() 放在 Seller() 函数的第一行，然后执行。 是的，seller() 函数运行良好。只有按钮不隐藏。 "columns": [ "data": "PurchaseID", "width": "50px", "render": function (data) return '' ] 我在我的项目中使用了数据表。 在 HTMLButtonElement.onclick (Purchase_Order:1) 处出现错误未捕获的 TypeError: dataTable.button 不是卖家 (Purchase_Order:436) 处的功能以上是关于使用 JQuery 隐藏页面上的按钮的主要内容，如果未能解决你的问题，请参考以下文章
Kickapps：使用jQuery&CSS在成员配置文件编辑页面中隐藏MYRSS&MYLINKS按钮