javascript - Pass table row data to on click function

Question

I would like to create one table that has "memory" of certain variable.

Currently I've made appending two tables, one of them has #table_body_storno:

• when oRacuni.Storno = 1, color this one red and make it unusable again as the receive is already been cancelled

Other one is #table_body:

• when oRacuni.Storno = 0, make it clickable and call function $('#Storno').modal("show");

I've tried multiple ways, adding .addClass when appending table row, adding tr style only etc Problem is if I use this code (down) I get two tables, upper one which is "normal" and bottom one which is "red" and not usable. I would like to merge these two into same table, so listed receives are ordered by some order, and not by upper ones - normal, down - cancelled.

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.")
        });
    });
}

It looks like this:

Then when I was trying with .addClass it looks good, but I can not figure out how to make "red" ones un-clickable.

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.")
    });
});

question from:https://stackoverflow.com/questions/65869225/pass-table-row-data-to-on-click-function

Answer 1

if you check your source by console, you will see your selectors won't work as expected. And if your colorization is working, maybe your clicks on the data table will fail (e. g. and maybe sorting).

1. Put all your TRs into one table.

2. Mark each TR with a data-attribute (data-*) and put your value into it (here: oRacuni.Storno).

3. Set an event listener to each TR inside of this table and handle data-* inside your function (modal box or alert).

Maybe something like this ...

$('#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>" );

Please, think about appending a full string with all entries at once to your DOM - not one by one (performance!)!

$(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;
        }
    });
});

I haven't tested this, but this could be solid to your needs.

Last but not least and if you are not happy with the solution above: if you want to remove unwanted event listeners, you can use unbind('click') on a group of selectors.

You will need further steps (change data-storno if storno is used in modalbox), so setting an identifier at each TR (e. g. class="vehicle[ID]"; [TR] is a unique ID out of your database) would speed up your further work, too, to adress such interactions directly to your overview (instead of reloading; e. g. deleting, updating, set to un-storno).

At least, please ...

• ... re-think use of global vars in days of ECMA6, let and so on.
• ... two document.ready() inside your function PopuniTablicuRacuni()

best regards, stay healthy and have fun with coding!