HTML/JS按钮禁用启用异常：成年表为空时未成年表按钮未激活

核心问题1：表头行干扰行数量判断 #

你的checkPolnoletni函数用getElementsByTagName("tr")统计表格行，但浏览器会自动把<th>标签包裹在一个默认的<tr>里，所以即使所有成年用户数据行被移除，表格里仍有1个表头行的<tr>，导致polnoletniRows.length始终不为0，函数返回false，无法启用未成年按钮。

核心问题2：重复ID导致仅第一个未成年按钮能被选中 #

你给未成年按钮设置了固定IDKURVA，如果有多个未成年用户，会生成多个相同ID的元素，document.getElementById只能获取第一个，其他按钮永远无法被启用。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<script>
    var data = '[{"ime":"Angela","prezime":"Angelova","id":"1503996780019","pol":"1","godini":"14","email":"anchian@yahoo.com","lokacija":"Bitola"},{"ime":"Dimitar","prezime":"Dimitrov","id":"1204950490019","pol":"2","godini":"71","email":"dimitar.dimitrov@gamil.com","lokacija":"Skopje"}]'
    var newData = JSON.parse(data)

    window.onload=function (){
      for(let i=0;i<newData.length;i++){
        let ime=newData[i].ime
        let prezime=newData[i].prezime
        let pol=newData[i].pol
        let godini=newData[i].godini
        let email=newData[i].email
        let lokacija=newData[i].lokacija

        let maloletni=document.getElementById("maloletni")
        let polnoletni=document.getElementById("polnoletni")

        if(godini<18){
          // 用class代替重复ID，方便选中所有未成年按钮
          maloletni.innerHTML+="<tr><td>"+ime+"</td>" +
                  "<td>"+prezime+"</td>" +
                  "<td>"+email+"</td>" +
                  "<td>"+lokacija+"</td>" +
                  "<td><button class='maloletni-btn' disabled='true'>Вакциниран</button></td></tr>"
        }


        let poln=document.createElement("tr")
        if(godini>=18){
          poln.innerHTML+="<td>"+ime+"</td>" +
                  "<td>"+prezime+"</td>" +
                  "<td>"+email+"</td>" +
                  "<td>"+lokacija+"</td>" +
                  "<td><button onclick='vakciniran(this)'>Вакциниран</button></td>"
          polnoletni.append(poln)
        }

        if(pol==="1")
          poln.style.backgroundColor="orange"
        else if(pol==="2")
          poln.style.backgroundColor="lightblue"
      }
      // 页面加载完成后先检查一次成年表状态
      updateMaloletniButtons()
    }

    // 修复行数量判断：统计数据行（排除表头行）
    function checkPolnoletni() {
      let polnoletni=document.getElementById("polnoletni")
      // 统计tbody里的tr，浏览器会自动将数据行放入tbody，表头放入thead
      let tbody = polnoletni.querySelector('tbody') || polnoletni;
      let dataRows = tbody.querySelectorAll('tr');
      return dataRows.length === 0;
    }

    // 统一更新未成年按钮状态的函数
    function updateMaloletniButtons() {
      let buttons = document.querySelectorAll('.maloletni-btn');
      buttons.forEach(btn => {
        btn.disabled = !checkPolnoletni();
      });
    }

    function vakciniran(button) {
      let parent=button.parentNode.parentNode
      parent.style.opacity=1
      let interval=setInterval(function (){
        parent.style.opacity-= 0.1
      }, 150)
      setTimeout(function (){
        clearInterval(interval)
        let list=document.getElementById("list")
        let item=document.createElement("li")
        item.innerHTML=parent.children[0].innerHTML+" "+parent.children[1].innerHTML
        list.append(item)
        parent.remove()
        // 更新未成年按钮状态
        updateMaloletniButtons()
      }, 1500)
    }
</script>
</head>
<body>
<div id="container">
  <h1>Вакцина.мк</h1>
  <h2>Сајт за искажување интерес за вакцина</h2>
  <div class="div">
    <label>Име:</label> <input type="text" id="name">
  </div>
  <div class="div">
    <label>Презиме</label> <input type="text" id="surname">
  </div>
  <div class="div">
    <label>Матичен број:</label> <input type="text" id="embg">
  </div>
  <div class="div">
    <label>Пол:</label> <input type="radio" id="female">Женски <input type="radio" id="male">Машки
  </div>
  <div class="div">
    <label>Години:</label> <input type="text" id="years">
  </div>
  <div class="div">
    <label>Емаил адреса:</label> <input type="text" id="email">
  </div>
  <div class="div">
    <label>Локација:</label>
    <select id="location">
      <option>Скопје</option>
      <option>Куманово</option>
      <option>Битола</option>
      <option>Тетово</option>
    </select>
  </div>
  <button onclick="vnesi()" id="vnesi">Внеси</button>
</div>

<div id="div1">
  <h2>Пријавени малолетни граѓани</h2>
  <table id="maloletni">
    <th>Име</th>
    <th>Презиме</th>
    <th>Адреса</th>
    <th>Локација</th>
    <th>Статус</th>
  </table>
</div>

<div id="div2">
  <h2>Пријавени полнолетни граѓани</h2>
  <table id="polnoletni">
    <th>Име</th>
    <th>Презиме</th>
    <th>Адреса</th>
    <th>Локација</th>
    <th>Статус</th>
  </table>
</div>
<br> <br>
<h3>Вакцинирани:</h3>
<ul id="list"></ul>
</body>
</html>

关键修复点说明 #

1. 修复行数量判断逻辑：
   • 改用tbody中的<tr>统计数据行，因为浏览器会自动将表头<th>放入<thead>，数据行放入<tbody>，这样能准确判断成年表是否为空。
2. 替换重复ID为Class：
   • 将未成年按钮的id="KURVA"改为class="maloletni-btn"，使用document.querySelectorAll选中所有按钮，确保所有未成年按钮都能被启用。
3. 新增统一状态更新函数：
   • 创建updateMaloletniButtons函数，统一处理未成年按钮的禁用/启用状态，页面加载完成后也会执行一次，确保初始状态正确。

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