将表格行数据传递给点击功能

Question

我想创建一个具有特定变量“内存”的表。

目前我已经追加了两个表，其中一个有#table_body_storno：

• 当oRacuni.Storno = 1 时，将其涂成红色并再次使其无法使用，因为接收已被取消

另一个是#table_body:

• 当oRacuni.Storno = 0时，使其可点击并调用函数$('#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.")
    });
});

Answer 1

如果您通过控制台检查源代码，您会发现选择器无法按预期工作。如果您的着色工作正常，您对数据表的点击可能会失败（例如，可能是排序）。

1. 将所有的 TR 放入 一个 表中。

2. 用数据属性 (data-*) 标记每个 TR 并将您的值放入其中（此处：oRacuni.Storno）。

3. 为该表中的每个 TR 设置一个事件侦听器，并在您的函数（模态框或警报）内处理 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')。

您将需要进一步的步骤（如果 storno 在 modalbox 中使用，则更改 data-storno），因此在每个 TR 处设置一个标识符（例如 class="vehicle[ID]"; [TR] 是您数据库中的唯一 ID ) 也会加快您进一步的工作，将此类交互直接处理到您的概览中（而不是重新加载；例如删除、更新、设置为 un-storno）。

至少，请...

• ...重新考虑在 ECMA6、let 等时代使用全局变量。
• ...函数 PopuniTablicuRacuni() 中的两个 document.ready()

最好的问候，保持健康，享受编码的乐趣！