如何从jQuery对话框表中删除表的行?

时间:2019-02-09 16:43:44

标签: javascript jquery

有一个jquery对话框(#dialog-message1),其中附加了表(tableINFO)。 表格的每一行在最后一栏中显示了一些有关产品的信息,其中包含图片链接。 我想创建一个单击事件,其中将采取一些措施,即删除表行和(potrawy1Engine.php)脚本调用。 我尝试创建(.confirmation2),但无法正常工作-而是遵循链接。

请问有人可以帮我和有关js脚本的建议吗?

我想做的是删除表tableINFO中的一行,单击该链接后单击该链接。

.confirmation1和.confirmation可以正常工作,只有.confirmation2不起作用。 也许问题在于表和链接是在jquery中动态创建的?

这是js:

$("#dialog-message").hide();

$('.confirmation').on('click', function(e) {
    e.preventDefault();
    var lnk = $(this).attr('href');
    $("#dialog-message").dialog({
        modal: true,
        buttons: {
                Ok: function() {
                    $(this).dialog("close");
                    window.location.href = lnk;
                },
                Anuluj: function() {
                    $(this).dialog("close");
                }
        }
    });
});

$("#dialog-message1").hide();

$('.confirmation1').on('click', function(e) {
    e.preventDefault();
    var lnk = $(this).attr('href');
    var product_name = $(this).parents("tr").find("td").first().html();

    $( "#dialog-message1" ).hide();
    $( "#dialog-message1 table" ).remove();
    $( "#dialog-message1 #labelINFO" ).remove();

    $("#dialog-message1").append("<table id='tableINFO'> </table>"); 
    $("#dialog-message1 table").append("<tr><th  width='350px' >Nazwa produktu</th><th width='70px'>Waga (g)</th><th  width='100px'>Kalorie (Kcal)</th> <th  width='80px'>Białko (g)</th> <th  width='90px'>Tłuszcze (g)</th><th  width='120px'>Węglowodany (g)</th><th  width='30px'> </th> </tr>");

    $.ajax({
            method: "POST",
            url: "potrawyINFOEngine.php",
            data: {"nazwa": product_name},
    }).done(function( data ) {
            var result = $.parseJSON(data);
            var len = result.length;        
            for(var i=0; i<len; i++){
                var T_nazwaproduktu = result[i].produkt;
                var T_waga = result[i].waga;
                var T_kalorie = result[i].kalorie;
                var T_bialko = result[i].bialko;
                var T_tluszcze = result[i].tluszcze;
                var T_weglowodany = result[i].weglowodany;
                var tr_str = "<tr>" +
                            "<td align='left'>" + T_nazwaproduktu + "</td>" +
                            "<td align='right'>" + T_waga + "</td>" +
                            "<td align='right'>" + T_kalorie + "</td>" +
                            "<td align='right'>" + T_bialko + "</td>" +
                            "<td align='right'>" + T_tluszcze + "</td>" +
                            "<td align='right'>" + T_weglowodany + "</td>" +
                            "<td align='center'>" + 
                            "<a href='usunProduktPotrawa.php?nazwaPotrawy=" + product_name + "&nazwaProduktu=" + T_nazwaproduktu + "' title='Usuń produkt' class='confirmation2'><img src='pictures/cross16.jpg' width='10' height='10' style='margin: 0px 0px' /></a>" ;
                            "</td>" +
                            "</tr>";
            $("#dialog-message1 table").append(tr_str);
            }
        console.log(data);
    });

    $.ajax({
                method: "POST",
                url: "potrawyINFOOpisEngine.php",
                data: {"nazwa": product_name},
    }).done(function( data ) {
                var result = $.parseJSON(data);
                console.log(result);
                $("#dialog-message1").append("<label id='labelINFO'>" + result + "</label>");
    $( "#dialog-message1" ).show();

    });

    $("#dialog-message1").dialog({
        height: "auto",
            width: 950,
            modal: true,
            buttons: {
                Ok: function() {
                    $(this).dialog("close");
            $( "#dialog-message1 table" ).remove();
            $( "#dialog-message1 #labelINFO" ).remove();
                }
            }
    });
});

$("#dialog-message2").hide();

$('.confirmation2').on('click', function(e) {
    e.preventDefault();
    var lnk = $(this).attr('href');
    var product_name = $(this).parents("tr").find("td").first().html();

    $( "#dialog-message2" ).hide();

    $.ajax({
                method: "POST",
                url: "potrawy1Engine.php",
                data: {"nazwa": product_name},
    }).done(function( data ) {
                var result = $.parseJSON(data);
                console.log(result);
                $( "#dialog-message2" ).show();
    });

    $("#dialog-message2").dialog({
        height: "auto",
            width: 450,
            modal: true,
            buttons: {
                Ok: function() {
                    $(this).dialog("close");
                }
            }
    });
});

HTML部分在这里:

<div id="dialog-message" title="Usuwanie potrawy">
        <p>
        <span class="ui-icon ui-icon-help" style="float:left; margin:0 7px 50px 0;"></span>Czy chcesz usunąć wybraną potrawe?
        </p>
        <p>
        Naciśnij OK aby kontynuować.
        </p>
</div>

<div id="dialog-message1" title="Składniki i opis potrawy">
</div>

<div id="dialog-message2" title="Test">
</div>

预先感谢您的帮助。

0 个答案:

没有答案