gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 18:56:27 26 4
gpt4 key购买 nike

我想创建一个具有某些变量“内存”的表。
目前我已经追加了两个表,其中一个有 #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.")
    });
    });
    }
    它看起来像这样:
    enter image description here
    然后,当我尝试使用 .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.")
    });
    });
    enter image description here

    最佳答案

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

  • 将您所有的 TR 放入 一个 table 。
  • 用数据属性 (data-*) 标记每个 TR 并将您的值放入其中(此处:oRacuni.Storno)。
  • 为该表内的每个 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')。
    您将需要进一步的步骤(如果在 modalbox 中使用了 storno,则更改 data-storno),因此在每个 TR 处设置一个标识符(例如 class="vehicle[ID]"; [TR] 是数据库中的唯一 ID)会加快速度也可以进一步开展工作,将此类交互直接反射(reflect)到您的概览中(而不是重新加载;例如删除、更新、设置为 un-storno)。
    至少,请...
  • ...重新考虑在 ECMA6 的日子里使用全局变量,让等等。
  • ... 函数 PopuniTablicuRacuni()
  • 中的两个 document.ready()

    最好的问候,保持健康,享受编码的乐趣!

    关于javascript - 将表格行数据传递给点击功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65869225/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com