將表格行數據傳遞給單擊 function

Question

我想創建一個具有某些變量“內存”的表。

目前我已經追加了兩個表，其中一個有#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.")
    });
});

Answer 1

如果您通過控制台檢查您的源代碼，您將看到您的選擇器無法按預期工作。 如果您的着色工作正常，您對數據表的點擊可能會失敗（例如，可能是排序）。

1. 把你所有的 TR 放在一張桌子上。

2. 用數據屬性 (data-*) 標記每個 TR 並將您的值放入其中（此處：oRacuni.Storno）。

3. 為該表中的每個 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）。

至少，請...

• ...重新考慮在 ECMA6 的日子里使用全局變量，讓等等。
• ... function PopuniTablicuRacuni() 中的兩個 document.ready()

最好的問候，保持健康，享受編碼的樂趣！