table内tr与a标签绑定的onclick点击事件无响应问题

你遇到的点击无响应、控制台无报错的核心原因是HTML表格结构存在大量语法错误，浏览器自动修正DOM树时破坏了元素的层级关系和事件绑定逻辑，和table布局本身无关，具体错误点：

• 表格结构不符合规范：<table>标签下直接放置<td>单元格，缺少对应的<tr>行起始标签，只有行的闭合标签</tr>，浏览器解析时会自动重构DOM节点位置，打乱原有元素关系
• 标签未闭合：第一个单元格内的<a onclick="editScreenAvian()">标签没有写</a>闭合，浏览器会将该标签之后的所有内容默认归入这个a标签内部，后续单元格的a标签全部成为它的子节点，点击事件被异常拦截，无法触发绑定的对应函数
• 标签嵌套顺序错误：标题部分的<b>和<font>标签闭合顺序颠倒，属于非法嵌套，会干扰DOM解析
• 存在冗余无效内容：iframe标签内有孤立的单引号属性，代码末尾存在3个无对应起始标签的</div>闭合标签，进一步干扰DOM树生成
• JS代码存在隐性语法错误：部分分支函数调用多写括号、部分接口路径缺少参数分隔符，会导致功能执行异常

按以下步骤逐一修正即可：

1. 补全表格的合法结构：在所有<td>外层包裹<tr>起始标签，确保table的层级符合table > tr > td的规范
2. 补全所有未闭合的标签，修正标签嵌套顺序，删除所有孤立的属性、多余的闭合标签
3. 修正JS中的语法错误，显式声明全局变量避免隐式全局变量污染
4. 给无跳转逻辑的a标签加上href="javascript:void(0)"属性，确保所有浏览器下a标签的点击行为正常触发

JS部分 #

// 显式声明全局变量存储iframe地址，避免变量污染
let $source = '';
function editScreenAvian() {
  $source = "../DMKgenavianv1.php?caseNumber=<?=$caseNumber;?>";
  loadIFrame();
}

function editScreenBovine() {
  $source = "./DMKgenbovinev3.php?caseNumber=<?=$caseNumber;?>";
  loadIFrame();
}

function editScreenPorcine() {
  // 补上原路径缺失的参数分隔符?
  $source = "../DMKGenPorcinev1.php?caseNumber=<?=$caseNumber;?>";
  loadIFrame();
}

function editScreenIAVA() {
  $source = "./DMKIAVAv1.php?caseNumber=<?=$caseNumber;?>";
  loadIFrame();
}

function editScreenIAVS() {
  $source = "./DMKIAVsv1.php?caseNumber=<?=$caseNumber;?>";
  loadIFrame();
}

function editScreenQuickBovine() {
  $source = "./DMKQuickbovinev3.php?caseNumber=<?=$caseNumber;?>";
  loadIFrame();
}

function editScreenQuickPorcine() {
  $source = "./DMKQuickPorcinev3.php?caseNumber=<?=$caseNumber;?>";
  loadIFrame();
}

function editScreenRabies() {
  $source = "./DMKGenRabiesNoHistov3.php?caseNumber=<?=$caseNumber;?>";
  loadIFrame();
}

function editScreenRabiesNo() {
  $source = "./DMKGenRabiesHistov3.php?caseNumber=<?=$caseNumber;?>";
  loadIFrame();
}

function editScreenSDAIBS() {
  $source = "./DMKSDMIvi.php?caseNumber=<?=$caseNumber;?>";
  loadIFrame();
}

function editScreenNDMI() {
  $source = "./DMKNDMIvi.php?caseNumber=<?=$caseNumber;?>";
  loadIFrame();
}

function editScreenVTMI() {
  $source = "./DMKVTMIvi.php?caseNumber=<?=$caseNumber;?>";
  loadIFrame();
}

function editScreenGENMI() {
  $source = "./DMKFoodSafetyv2.php?caseNumber=<?=$caseNumber;?>";
  loadIFrame();
}

let $caseDefaultKey = "<?=$caseDefault?>";
if ($caseDefaultKey === "11") {
  editScreenSDAIBS();
}
if ($caseDefaultKey === "50") {
  // 删除原代码多写的一对括号
  editScreenIAVA();
}
if ($caseDefaultKey === "53") {
  editScreenBovine();
}
if ($caseDefaultKey === "") {
  editScreenPorcine();
}

function loadIFrame() {
  $("#divEntryArea").html('<iframe style="margin-left: 0vw; width: 64vw; height: 100vh; border: none; margin-right: 0;" src=\'' + $source + '&noHeading=Y\'></iframe>');
}

HTML部分 #

<center>
  <!-- 修正标签闭合顺序 -->
  <b><font size="+1">title 1 </font></b><br>
</center>
<table width="65%" border="1" align="right">
  <!-- 补全缺失的tr起始标签 -->
  <tr>
    <!-- 补全a标签闭合，加上href属性确保点击行为正常 -->
    <td width="5%"><a href="javascript:void(0)" onclick="editScreenAvian()">cell 1</a><br></td>
    <td width="5%"><a href="javascript:void(0)" onclick='editScreenBovine()'>cell 2</a><br></td>
    <td width="5%"><a href="javascript:void(0)" onclick='editScreenPorcine()'>cell 3</a><br></td>
  </tr>
</table><br>

<!-- 删除iframe里孤立的单引号属性，补全对应容器节点 -->
<div id="divEntryArea">
  <iframe style="margin-left: 36vw; width: 64vw; height: 100vh; border: none; margin-right: 0;"></iframe>
</div>
<div id="caseSpecimens" class="handsontable"></div>

后续扩展表格时严格遵循嵌套规范即可：不要直接在table下写td/th，单元格必须放在tr标签内，标签闭合顺序和开标签顺序完全相反，就不会再出现这类事件静默失效的问题。

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