[英]Pass table row data to on click function
我想创建一个具有某些变量“内存”的表。
目前我已经追加了两个表,其中一个有#table_body_storno
:
oRacuni.Storno = 1
时,将此颜色设为红色并使其再次无法使用,因为接收已被取消另一个是#table_body
:
oRacuni.Storno = 0
时,使其可点击并调用 function $('#Storno').modal("show");
我尝试了多种方法,在追加表格行时添加.addClass,仅添加 tr 样式等问题是,如果我使用此代码(向下),我会得到两个表格,上一个是“正常”,下一个是“红色”并且不可用。 我想将这两个合并到同一个表中,因此列出的接收按某种顺序排序,而不是按上级排序-正常,向下-取消。
var data;
function PopuniTablicuRacuni() {
var table;
aRacuni.forEach(function (oRacuni) {
var VrstaGor = "";
if (oRacuni.VrstaGoriva == 1) {
VrstaGor = "Diesel";
} else if (oRacuni.VrstaGoriva == 2) {
VrstaGor = "Benzin";
}
if (oRacuni.Storno == 1) {
$("#table_body_storno").append("<tr><td>" + oRacuni.Kolicina + "</td><td>" + VrstaGor + "</td><td>" + oRacuni.DatumVrijeme + "</td><td>" + oRacuni.Zaposlenik + "</td><td>" + oRacuni.Cijena + "</td></tr>" );
} else {
$("#table_body").append("<tr><td>" + oRacuni.Kolicina + "</td><td>" + VrstaGor + "</td><td>" + oRacuni.DatumVrijeme + "</td><td>" + oRacuni.Zaposlenik + "</td><td>" + oRacuni.Cijena + "</td></tr>");
}
$(document).ready(function () {
table = $('#TablicaRacuni').DataTable();
console.log(table);
});
});
$(document).ready(function () {
$('#TablicaRacuni tbody#table_body').on('click', 'tr', function () {
data = table.row(this).data();
$('#Storno').modal("show");
});
$('#TablicaRacuni tbody#table_body_storno').on('click', 'tr', function () {
alert("Ovaj račun je već storniran.")
});
});
}
然后,当我尝试使用 .addClass 时,它看起来不错,但我不知道如何使“红色”的无法点击。
if (oRacuni.Storno == 1) {
$("#table_body").addClass("storno").append("<tr style='color: #ff0000;'><td>" + oRacuni.Kolicina + "</td><td>" + VrstaGor + "</td><td>" + oRacuni.DatumVrijeme + "</td><td>" + oRacuni.Zaposlenik + "</td><td>" + oRacuni.Cijena + "</td></tr>" );
} else {
$("#table_body").append("<tr><td>" + oRacuni.Kolicina + "</td><td>" + VrstaGor + "</td><td>" + oRacuni.DatumVrijeme + "</td><td>" + oRacuni.Zaposlenik + "</td><td>" + oRacuni.Cijena + "</td></tr>");
}
$(document).ready(function () {
$('#TablicaRacuni tbody#table_body').on('click', 'tr', function () {
data = table.row(this).data();
$('#Storno').modal("show");
});
$('#TablicaRacuni tbody#table_body.storno').on('click', 'tr', function () {
alert("Ovaj račun je već storniran.")
});
});
如果您通过控制台检查您的源代码,您将看到您的选择器无法按预期工作。 如果您的着色工作正常,您对数据表的点击可能会失败(例如,可能是排序)。
把你所有的 TR 放在一张桌子上。
用数据属性 (data-*) 标记每个 TR 并将您的值放入其中(此处:oRacuni.Storno)。
为该表中的每个 TR 设置一个事件侦听器,并在 function(模态框或警报)中处理 data-*。
也许像这样的东西......
$('#TablicaRacuni tbody').append("<tr data-storno=\""+oRacuni.Storno+"\"><td>" + oRacuni.Kolicina + "</td><td>" + VrstaGor + "</td><td>" + oRacuni.DatumVrijeme + "</td><td>" + oRacuni.Zaposlenik + "</td><td>" + oRacuni.Cijena + "</td></tr>" );
请考虑一次将包含所有条目的完整字符串附加到您的 DOM - 而不是一个一个一个一个(性能!)!
$(function(){
$('#TablicaRacuni tbody tr').on('click', function () {
let dataAttr = parseInt($(this).data('storno'), 10); // 1 or 0
switch (dataAttr) {
case 1:
alert("Ovaj račun je već storniran.");
break;
default: // 0 and everything else
data = table.row(this).data(); // not sure, what you expect here?!
$('#Storno').modal("show");
break;
}
});
});
我没有对此进行测试,但这可能会满足您的需求。
最后但同样重要的是,如果您对上述解决方案不满意:如果您想删除不需要的事件侦听器,您可以在一组选择器上使用 unbind('click')。
您将需要进一步的步骤(如果在 modalbox 中使用 storno,则更改 data-storno),因此在每个 TR 处设置一个标识符(例如 class="vehicle[ID]"; [TR] 是数据库中的唯一 ID)将加快继续你的进一步工作,将此类交互直接处理到你的概述中(而不是重新加载;例如删除、更新、设置为 un-storno)。
至少,请...
最好的问候,保持健康,享受编码的乐趣!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.