Django项目中如何实现表格Status列无空值时点击按钮弹出提示？

1 修复HTML语法问题 #

原代码中「Assign Status」按钮的a标签href属性缺少闭合引号，先修正避免JS选择元素出错：

<a href="#" id="assignbtn" class="btn btn-outline-primary btn-sm" role="button"><i class="fas fa-user-plus"></i> Assign Status </a>

2 添加前端校验逻辑 #

该校验逻辑直接在前端实现即可，无需额外请求后端，以下提供原生JS和jQuery两种实现方式，任选其一即可：

原生JS实现 #

把这段代码放到页面的<script>标签内即可：

document.addEventListener('DOMContentLoaded', function() {
  const assignBtn = document.getElementById('assignbtn');
  // 配置合法状态列表，后续新增状态直接往数组里加即可
  const validStatusList = ['Available', 'Not-Available', 'Running'];

  assignBtn.addEventListener('click', function(e) {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    let hasInvalidStatus = false;
    // 选中表格所有行的第三列（Status列，索引从0开始计数）
    const statusCells = document.querySelectorAll('table tr td:nth-child(3)');

    statusCells.forEach(cell => {
      const currentStatus = cell.textContent.trim();
      // 空值、不在合法列表内的值都判定为无效
      if (!currentStatus || !validStatusList.includes(currentStatus)) {
        hasInvalidStatus = true;
      }
    });

    // 所有状态均有效时才弹出提示
    if (!hasInvalidStatus) {
      alert('所有状态均已分配');
    }
  });
});

jQuery实现 #

如果你的项目已经引入了jQuery，可以用更简洁的写法：

$(function() {
  const validStatusList = ['Available', 'Not-Available', 'Running'];
  $('#assignbtn').click(function(e) {
    e.preventDefault();
    let hasInvalidStatus = false;

    $('table tr td:nth-child(3)').each(function() {
      const currentStatus = $(this).text().trim();
      if (!currentStatus || !validStatusList.includes(currentStatus)) {
        hasInvalidStatus = true;
      }
    });

    if (!hasInvalidStatus) {
      alert('所有状态均已分配');
    }
  });
});

3 集成到Django项目 #

你可以直接把JS代码写到对应模板的<script>标签中，也可以把代码单独存为静态JS文件，按照Django静态文件管理规范引入到模板即可。
如果你的Django模板渲染空值时会输出None字符串，上述代码已经自动判定为无效状态，无需额外修改；如果有其他需要排除的无效值，直接在校验逻辑里添加判断条件即可。

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