如何在JavaScript中根据表格多行status值设置result_status状态

核心逻辑很直接：遍历所有status_hidden[]输入框，只要有一个值为fail，就将result_status设为fail；所有值都是pass时，才设为pass。

具体实现代码 #

function hasil() {
  // 获取所有状态隐藏输入框
  const statusInputs = document.querySelectorAll('input[name="status_hidden[]"]');
  let allPass = true;

  // 逐个检查状态值，找到fail就终止遍历
  for (const input of statusInputs) {
    if (input.value.trim() === 'fail') {
      allPass = false;
      break;
    }
  }

  // 设置最终结果状态
  const resultStatus = document.getElementById('result_status');
  if (resultStatus) {
    resultStatus.value = allPass ? 'pass' : 'fail';
  }
}

关键使用说明 #

1. 触发时机：

   • 静态表格场景：在页面加载完成后调用hasil()，比如：

     window.onload = function() {
       hasil();
     };
     

   • AJAX动态加载表格场景：必须在表格渲染完成后调用hasil()，确保所有status_hidden[]元素已存在于DOM中：

     // 示例AJAX请求
     $.ajax({
       url: '你的接口地址',
       method: 'POST/GET',
       success: function(data) {
         // 渲染表格到页面容器
         $('#table-container').html(data);
         // 渲染完成后执行状态判断
         hasil();
       }
     });
     

2. 元素选择器适配：

   • 如果result_status用name属性而非ID，把选择器改成document.querySelector('input[name="result_status"]')
   • 若状态值存在大小写差异，可统一转小写后判断：input.value.trim().toLowerCase() === 'fail'

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