Question

我想添加并稍后从jquery对话框中删除具有所有行的表。我还想向此表/行添加一些CSS样式。该表应放入空的div id = dialog-message1。

有人可以帮我吗？

功能脚本部分附在下面：

$("#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();
    console.log(product_name);

    $("#dialog-message1").append("<table id='tableINFO'>");
    $("#dialog-message1").append("<tr><th>Nazwa produktu</th><th>Waga (g)</th><th>Kalorie (Kcal)</th></tr>");
    $("#dialog-message1").append("<tr><td>Table data</td><td>Table data</td><td>Table data</td></tr>");

    $("#dialog-message1").dialog({
        modal: true,
        buttons: {
            Ok: function() {
                    $(this).dialog("close");
                    //$( "tr" ).remove();
            }
        }
    });
});

我尝试添加行和列，然后将其删除，但是由于没有提供ID，因此只能从整个页面中删除表。

我可以看到行，但是无法删除它。

Answer 1

https://jsfiddle.net/asimshahiddIT/3vdup6jr/

$("#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();
    console.log(product_name);

    $("#dialog-message1").append("<table id='tableINFO'><tr><th>Nazwa produktu</th><th>Waga (g)</th><th>Kalorie (Kcal)</th></tr><tr><td>Table data</td><td>Table data</td><td>Table data</td></tr>");

    $("#dialog-message1").dialog({
        modal: true,
        buttons: {
            Ok: function() {
                    $(this).dialog("close");
                    $( "#dialog-message1 table" ).remove();
            }
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dialog-message1">
</div>
<button class="confirmation1">
CLICK
</button>

Answer 2

表已绑定到dialog，可以尝试删除其子级。

$("#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();

  //	console.log(product_name);

  $("#dialog-message1").append("<table id='tableINFO'>");

  $("#dialog-message1").append("<tr><th>Nazwa produktu</th><th>Waga (g)</th><th>Kalorie (Kcal)</th></tr>");
  $("#dialog-message1").append("<tr><td>Table data</td><td>Table data</td><td>Table data</td></tr>");

  $("#dialog-message1").dialog({
    modal: true,
    buttons: {
      Ok: function() {
        $(this).dialog("close");
        $("#dialog-message1").children().remove();
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button class="confirmation1">Confirm</button>
<div id="dialog-message1"></div>

如何从jQuery对话框添加和删除表

2 个答案: