Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
70 views
in Technique[技术] by (71.8m points)

javascript - Pass table row data to on click function

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: enter image description here

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

enter image description here

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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!


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...