表格单元格中用于打开模式对话框的按钮

Question

我有一个包含一些 PHP 和表单的表。这是其中的一部分，显示按钮放置在单元格中：

if ($giorno == "ven"){
echo '<td>'.$qres["ven_1"].'</td>;
echo '<td>';
?>
<form action="?" method="post">
 <input type="hidden" id="ven_1" name="ven_1" value="<?php echo $qres["ven_1"];?>">
 <button type="submit" class="btn" id="ts">click me</button>
</form>
<?php
echo '</td>';
}

表格下方有一个触发模式对话框的脚本。

它基本上计算一些单元格并在对话框中显示数字。

<script>
const re1 = /^[0-9][A-Z]/;
const re2 = /^c[0-9]/;

const actives = $('td').filter(function() {
  const text = $(this).text();
  const makeActive = text.match(re1) !== null;
  $(this).toggleClass('active', makeActive);
  $(this).toggleClass('compresenza', text.match(re2) !== null);
  return makeActive;
}).length;

$('<div id="messaggio"></div>').html(`${actives}`).dialog({
    title: 'Title',
    width: '300px',
    buttons: {},
    modal: true,
});
</script>

事实上，该对话框会在 加载 HTML 页面时打开 。 我想将对话框设置为

autoOpen: false

并仅在单击上表中的按钮时打开它。

实现这一目标的正确程序是什么？

Answer 1

您可以将对话框打开放入

function

，例如

function openDialog(actives) {
    $('<div id="messaggio"></div>').html(`${actives}`).dialog({
        title: 'Title',
        width: '300px',
        buttons: {},
       modal: true,
    });
}

并创建一个事件，例如

document.querySelector('form button#ts').addEventListener("click", function() {
    //TODO: Make sure actives is reachable and properly initialized here
    openDialog(actives);
});