如何实现表格单元格按钮点击时才打开jQuery模态对话框？

核心调整方向 #

要实现仅点击按钮才弹出对话框，需完成三个关键修改：初始化对话框时禁用自动打开、阻止表单默认提交行为、给按钮绑定点击触发逻辑。

步骤1：重构对话框初始化代码 #

将原页面加载时自动打开对话框的逻辑，改为先创建对话框实例并设置autoOpen: false，保存实例方便后续调用：

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;

// 创建对话框并禁用自动打开，保存实例
const dialogInstance = $('<div id="messaggio"></div>').html(`${actives}`).dialog({
    title: 'Title',
    width: '300px',
    buttons: {},
    modal: true,
    autoOpen: false // 关键配置：禁用页面加载时自动弹出
});

步骤2：阻止表单默认提交行为 #

按钮嵌套在<form>中，点击会触发表单提交导致页面刷新，需添加事件阻止该行为：

// 给按钮所在表单绑定提交事件，阻止默认刷新
$('form').on('submit', function(e) {
  e.preventDefault();
});

步骤3：给按钮绑定点击事件触发对话框 #

找到表格中的按钮，绑定点击事件调用对话框的open()方法：

// 绑定按钮点击事件，触发对话框弹出
$('#ts').on('click', function() {
  // 若需每次点击重新统计，可在此处重新执行统计逻辑并更新对话框内容
  // 示例：
  // const newActives = $('td').filter(function(){/* 重复统计逻辑 */}).length;
  // dialogInstance.html(`${newActives}`);
  
  dialogInstance.dialog('open');
});

完整修改后的脚本代码 #

<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;

// 创建对话框实例（禁用自动打开）
const dialogInstance = $('<div id="messaggio"></div>').html(`${actives}`).dialog({
    title: 'Title',
    width: '300px',
    buttons: {},
    modal: true,
    autoOpen: false
});

// 阻止表单提交刷新页面
$('form').on('submit', function(e) {
  e.preventDefault();
});

// 按钮点击触发对话框
$('#ts').on('click', function() {
  dialogInstance.dialog('open');
});
</script>

额外提示 #

如果表格存在多个同类按钮，建议给按钮添加统一类名（比如dialog-trigger），避免ID冲突：

// PHP部分修改按钮class
<button type="submit" class="btn dialog-trigger" id="ts">click me</button>

// JS部分改用类选择器绑定事件
$('.dialog-trigger').on('click', function() {
  dialogInstance.dialog('open');
});

内容的提问来源于stack exchange，提问作者Alessandro