javascript - 使用jquery单击删除按钮后更改行背景颜色
问题描述
嗨,我有一个表格,在单击该按钮后,该列中有一个删除按钮,该行将突出显示为红色。我一直在尝试一些不同的东西,但它只是不起作用。如何在 ConfirmBox() 方法中更改行的颜色?先感谢您.......................
<table id="loanSignatoriesTable" class="table table-striped table-bordered bg-light">
<thead class="bg-blue">
<tr>
<th>Emp No.</th>
<th>Employee Name</th>
<th>Rank</th>
<th>Designation</th>
<th>Group/Department</th>
<th>Signatory Type</th>
<th>Default</th>
<th>Status</th>
<th>Modified Date</th>
<th>Action</th>
</tr>
</thead>
</table>
--JAVASCRIPT
$(document).ready(function () {
var table = $('#loanSignatoriesTable').DataTable({
"orderCellsTop": true,
"bPaginate": true,
"order": [[1, "desc"]],
"dom": '<"row"<"col-6"l><"col-12"rt><"col-6"i><"col-6"p>>',
"language": {
"emptyTable": "No record/s to display"
},
"ajax": {
"url": "Signatories.aspx/GetEverySignatories",
"type": 'post',
"contentType": "application/json; charset=utf-8",
"dataSrc": "d"
},
"columns": [
{
"data": {
EmpId: "EmpId",
Id: "id"
},
"width": '15%',
"render": function (data, type, full, meta) { return data.EmpId }
},
{
"data": {
ModifiedDate: "ModifiedDate",
ApplicationNo: "ApplicationNo",
Id: "id"
},
"width": '15%',
"render": function (data, type, full, meta) {
return '<center>'
+ '<a href="#" name="idapplication" OnClick="return ConfirmBox(' +
data.Id + ');" value="Delete" > Delete <a/>'
+ '<br/>'
+ '<a href="#" name="idedit" OnClick="EditItem(' + data.Id + ');"
value="Edit" > Edit <a/>'
+ '</a>'
'</center >';
}
},
]
});
}
--调用确认框
function ConfirmBox(RefID) {
document.getElementById("hiddenRefID").value = RefID;
setTimeout(function () {
if (confirm("Are you sure you want to delete this record?")) {
CallButtonEvent();
}
else {
}
}, 1);
}
解决方案
您可以在函数参数中传递当前元素对象,然后在函数体中您可以访问调用元素的父 '<tr>' 元素,然后更新其 CSS 属性。使用以下代码更新 ajax 中的渲染属性:
"render": function (data, type, full, meta) {
return '<center>'
+ '<a href="#" name="idapplication" OnClick="return ConfirmBox(this,' +
data.Id + ');" value="Delete" > Delete <a/>'
+ '<br/>'
+ '<a href="#" name="idedit" OnClick="EditItem(' + data.Id + ');"
value="Edit" > Edit <a/>'
+ '</a>'
'</center >';
}
},
使用以下更新您的功能
function ConfirmBox(Elem, RefID) {
document.getElementById("hiddenRefID").value = RefID;
setTimeout(function () {
if (confirm("Are you sure you want to delete this record?")) {
let parentTRElement = $(Elem).closest('tr').css('background', 'red');
$(parentTRElement).css("background-color", "red");
CallButtonEvent();
}
else {
}
}, 1);
}
推荐阅读
- python - python if (X not in Y) or (Z not in Y) 条件意外结果
- perl - 打印输出到屏幕不同于输出到文件
- visual-studio-2019 - 在 VS2019 Team Explorer 中扩展“我的构建”的上下文菜单并检索选定的构建
- javascript - 条件有效和验证多次,除了一次
- css - 如何在 Electron 中设置默认最小宽度缩放
- python - 如何运行相同的线性模型 n 次?
- c++ - 我的 gdb 调试器在我启动时没有响应
- javascript - 如何使用javascript删除firebase实时数据库的子节点
- r - 如何在R中重命名来自欧盟统计局的数据中的行名
- algorithm - 什么算法可以找到范围内多个点的接近百分比