JavaScript动态生成表格：每行首单元格仅第一行链接生效问题

我一眼就看出问题出在哪了——你给每一行的第一个单元格都设置了id="sn"，但HTML里id属性必须是唯一的！document.getElementById("sn")只会找到页面上第一个带有这个id的元素，所以只有第一行的链接能被设置成功。

另外还有个隐藏坑：你用了全局变量stationid，循环结束后它会变成最后一条数据的id，就算所有行都加上链接，点击任何一个触发editStation时，alert的都会是最后那个id，而不是当前行的。

下面是修复后的完整方案：

1. 移除重复的id，直接在创建单元格时生成链接 #

我们不需要事后再去修改innerHTML，而是在创建td1的时候直接把链接元素加上，同时把当前行的st_id作为参数传给editStation，避免全局变量的问题。

修改后的viewStations函数 #

function viewStations(){
  document.getElementById("viewbutton").disabled = true;
  db.transaction(function (tx) {
    tx.executeSql('SELECT * FROM STATIONS', [], function (tx, results) {
      // 清空tbody，避免重复加载数据
      const tbody = document.getElementById("tbody");
      tbody.innerHTML = "";
      
      for(let i=0; i < results.rows.length; i++){
        const rowData = results.rows.item(i);
        // 直接把需要的数据传给createCells，不用依赖全局变量
        createCells(
          rowData.st_id, 
          rowData.station, 
          `${rowData.address}, ${rowData.city}, ${rowData.lga}`, 
          rowData.zone
        );
      }
    }, null);
  });
}

修改后的createCells函数 #

function createCells(stationId, stationName, address, zone) {
  const tbody = document.getElementById("tbody");
  const row = document.createElement("tr");
  
  // 创建SN列的单元格，直接生成可点击链接
  const td1 = document.createElement("td");
  td1.setAttribute("align","center");
  
  const link = document.createElement("a");
  link.href = "javascript:void(0);";
  link.onclick = function() {
    // 直接传入当前行的stationId，确保点击时拿到正确的值
    editStation(stationId);
  };
  link.textContent = stationId;
  td1.appendChild(link);
  
  // 其他单元格保持逻辑，移除不必要的重复id
  const td2 = document.createElement("td");
  td2.setAttribute("align","center");
  td2.textContent = stationName;
  
  const td3 = document.createElement("td");
  td3.setAttribute("align","center");
  td3.textContent = address;
  
  const td4 = document.createElement("td");
  td4.setAttribute("align","center");
  td4.textContent = zone;
  
  // 组装行并添加到tbody
  row.appendChild(td1);
  row.appendChild(td2);
  row.appendChild(td3);
  row.appendChild(td4);
  tbody.appendChild(row);
}

修改后的editStation函数 #

function editStation(stationId){
  alert("This link is not working yet. The table id is: "+ stationId);
}

2. 额外优化：修复HTML表头的样式问题 #

你的HTML表头里部分样式缺少分号，会导致样式失效，比如width:35% text-align:center应该补上分号：

<thead>
  <tr>
    <th style="color:brown; font-weight:bold; font-size:18px; width:5%; text-align:center;">SN</th>
    <th style="color:brown; font-weight:bold; font-size:18px;width:35%; text-align:center;">STATION NAME</th>
    <th style="color:brown; font-weight:bold; font-size:18px; width:40%; text-align:center;">ADDRESS</th>
    <th style="color:brown; font-weight:bold; font-size:18px; width:20%; text-align:center;">ZONE</th>
  </tr>
</thead>

修复逻辑说明 #

• 移除重复的id属性，避免getElementById只能匹配第一个元素的问题；
• 用参数传递数据代替全局变量，确保每个行的点击事件都能获取到对应行的stationId；
• 直接创建DOM元素生成链接，比修改innerHTML更高效、更可靠。

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