如何为单个Table设置独立Style和Script而不影响其他Table？

一、样式隔离：仅作用于目标表格 #

你当前的CSS用了全局选择器（比如td、.btn1），会匹配页面所有对应元素。要实现样式隔离，只需给目标表格添加唯一类名，再缩小CSS选择器的作用范围：

1. 给表格添加专属类名：

<table class="custom-target-table">

2. 修改CSS选择器，加上类名前缀，确保样式只作用于该表格内部的元素：

<style>
/* 仅作用于.custom-target-table里的单元格 */
.custom-target-table td { text-align: center; }
.custom-target-table th, .custom-target-table td { border: 1px solid gray; }

/* 仅作用于该表格内的按钮 */
.custom-target-table .btn1 {background-color: #4CAF50;} /* Green */
.custom-target-table .btn2 {background-color: #008CBA;} /* Blue */
</style>

注意：style标签不能放在table元素内部，这不符合HTML规范，要把它移到<head>或<body>的其他位置（比如表格上方或页面头部）。

二、脚本隔离：避免全局事件冲突 #

你的getElement是全局函数，表格的onclick会监听整个表格区域的点击，容易和其他表格的事件逻辑冲突。可以通过两种方式隔离：

方案1：在函数内判断点击源归属 #

修改函数逻辑，只有当点击元素属于目标表格时，才执行后续代码：

<script>
function getElement(e) {
    var element = e.target || e.srcElement;
    // 检查点击元素是否在目标表格范围内
    if (!element.closest('.custom-target-table')) return;
    
    var btnId = element.id;
    // 你的原有业务逻辑...
}
</script>

方案2：移除全局函数，绑定专属事件 #

更推荐这种方式，彻底避免全局变量污染：

<!-- 表格去掉onclick属性 -->
<table class="custom-target-table">
<!-- 表格内容... -->
</table>

<script>
// 获取目标表格元素
const targetTable = document.querySelector('.custom-target-table');
// 仅给这个表格绑定点击事件
targetTable.addEventListener('click', function(e) {
    var element = e.target || e.srcElement;
    var btnId = element.id;
    // 你的原有业务逻辑...
});
</script>

三、修正代码中的语法错误 #

你提供的代码还有几处小问题，顺便修正：

• 移除style、script标签里多余的**符号
• a标签的download属性写法错误，应该是download=""
• button的onClick用了中文引号，要改成英文引号onClick="..."

修改后的完整示例：

<style>
.custom-target-table td { text-align: center; }
.custom-target-table th, .custom-target-table td { border: 1px solid gray; }
.custom-target-table .btn1 {background-color: #4CAF50;}
.custom-target-table .btn2 {background-color: #008CBA;}
</style>

<table class="custom-target-table">
  <col style="width:82%"><col style="width:8%"><col>
  <tr>
    <td>Description #1</td>
    <td><a href="/file1.mp4" download=""></a>
      <button id="btn1-1" class="button btn1">mp4 </button></td>
    <td><a href="/file1.pdf" download=""></a>
      <button id="btn2-1" class="button btn2">PDF</button></td>
  </tr>
</table>

<script>
const targetTable = document.querySelector('.custom-target-table');
targetTable.addEventListener('click', function(e) {
    var element = e.target || e.srcElement;
    var btnId = element.id;
    // 这里写你的业务逻辑
});
</script>

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