Javascript 将表行数据传递给单击函数

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

目前我添加了两个表，其中一个有

#table\u body\u storno

：

• 当

  oRacuni.Storno=1

  时，将此项涂成红色，并使其再次无法使用，因为接收已被取消

另一个是

#表体

：

• 当

  oRacuni.Storno=0

  时，使其可单击并调用函数

  $（'#Storno'）。模式（“显示”）

我尝试了多种方法，在追加表行时添加.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.")
        });
    });
}

var数据；
函数poputablicuracuni（）{
var表；
aRacuni.forEach（函数（oRacuni）{
var VrstaGor=“”；
if（oRacuni.VrstaGoriva==1）{
VrstaGor=“柴油机”；
}else if（oRacuni.VrstaGoriva==2）{
VrstaGor=“Benzin”；
}
if（oRacuni.Storno==1）{
$（“#table#body_storno”）。追加（“+oRacuni.Kolicina+”+VrstaGor+”+oRacuni.DatumVrijeme+”+oRacuni.Zaposlenik+“+oRacuni.Cijena+”）；
}否则{
$（“#表体”）.append（“+oRacuni.Kolicina+”+VrstaGor+”+oRacuni.DatumVrijeme+“+oRacuni.Zaposlenik+”+oRacuni.Cijena+”）；
}
$（文档）.ready（函数（）{
table=$（'TablicaRacuni'）。DataTable（）；
控制台日志（表）；
});
});
$（文档）.ready（函数（）{
$（“#TablicaRacuni tbody#table#u body”）。在（'click'，'tr'，function（）{
data=table.row（this.data（）；
$（'Storno'）。模态（“show”）；
});
$（“#TablicaRacuni tbody#table#u body_storno”）。在（'click'，'tr'，function（）{
警惕（“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.")
    });
});

if（oRacuni.Storno==1）{
$（“#table_body”）.addClass（“storno”）.append（“+oRacuni.Kolicina+”+VrstaGor+”+oRacuni.DatumVrijeme+”+oRacuni.Zaposlenik+”+oRacuni.Cijena+”）；
}否则{
$（“#表体”）.append（“+oRacuni.Kolicina+”+VrstaGor+”+oRacuni.DatumVrijeme+“+oRacuni.Zaposlenik+”+oRacuni.Cijena+”）；
}
$（文档）.ready（函数（）{
$（“#TablicaRacuni tbody#table#u body”）。在（'click'，'tr'，function（）{
data=table.row（this.data（）；
$（'Storno'）。模态（“show”）；
});
$（'#TablicaRacuni tbody#table#u body.storno'）。在（'click'，'tr'，function（）{
警惕（“Ovaj račun je većstorniran.”）
});
});

---

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

将所有TR放入一张表中

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

为此表中的每个TR设置一个事件侦听器，并处理函数（模式框或警报）中的数据-*

也许是这样的

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

我还没有测试过这个，但它可以满足您的需求

最后但并非最不重要的一点是，如果您对上述解决方案不满意：如果您想删除不需要的事件侦听器，可以在一组选择器上使用“取消绑定”（“单击”）

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

至少，请

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

---

致以最良好的祝愿，保持健康，享受编码带来的乐趣

天才。。我花了好几天时间思考如何从列表到表解析

oRacuni.Storno

数据。。我曾很好地尝试用oRacuni.Storno制作另一个

td

，它成功了，但随后在桌面上进行了直播。我不知道如何使用

数据属性

。另外，如果您有时间提供帮助和建议，我已经在

oRacuni.Storno==1

表格行变为红色时，是否有更简单/更正确的方法

if（oRacuni.Storno==1）{$（“#table_body”）.append（@cortex:设置一个类而不是内联css；例如'
$(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;
        }
    });
});