如何在不破坏表格边框的情况下为表格行添加删除线（Jquery点击触发实现）

你之前遇到的布局错乱问题，核心原因是给tr使用绝对定位伪元素时，没有给表格行设置position: relative，导致伪元素脱离了表格行的上下文，相对于更高层级的元素（比如表格或body）定位，进而打乱了表格的原有布局。下面给你两种实用的解决方案：

方案1：整行贯穿的删除线（推荐） #

这种方式会在表格行的中间生成一条完整的横线，完全不会影响表格边框和布局：

修改你的.strikethrough相关CSS为：

.tr2.strikethrough {
  position: relative; /* 让伪元素以当前表格行为定位基准 */
}

.tr2.strikethrough::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  border-bottom: 2px solid #ff0000; /* 可自定义颜色、粗细 */
  transform: translateY(-50%); /* 保证线条垂直居中 */
}

原理说明： #

• 给目标表格行（.tr2）添加position: relative，让伪元素的绝对定位严格基于当前行
• 使用::after伪元素生成删除线，通过top:50%+transform: translateY(-50%)实现完美垂直居中
• width:100%确保线条覆盖整行宽度，不会超出表格范围

方案2：每个单元格文字添加删除线 #

如果你希望每行的文字单独显示删除线，而非整行的一条贯穿线，可以用更简单的方式：

.strikethrough td {
  text-decoration: line-through;
  color: #999; /* 可选：让文字变灰，强化删除状态 */
}

这种方式直接给行内所有单元格的文字添加删除线，完全不会干扰表格布局。

完整可运行代码（整合方案1） #

下面是修复后的完整代码，直接运行即可看到效果：

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button tabindex="1" onclick="CreateTableFromJSON()" value="Create Table From JSON" style="border: 1px solid black">animals</button>
<p id="showData"></p>

JavaScript #

const animals = [
  { "animalId": "1", "animalName": "elephent", "cageNum": "231", "legsNum": "4", "CandidatesForDeletion": false },
  { "animalId": "2", "animalName": "tiger", "cageNum": "324", "legsNum": "56.00", "CandidatesForDeletion": false },
  { "animalId": "3", "animalName": "wolf", "cageNum": "414", "legsNum": "210.40", "CandidatesForDeletion": false }
];

let tableBody = '<table id="table"><tr class="tr tr1"><td class="td1">animal Id</td><td class="td1">animal name</td><td class="td1">cage Number</td><td class="td1">legs Number</td><td class="td1">delete</td></tr>';

animals.forEach(function (d) {
  tableBody += `<tr class="tr tr2">
    <td class="td2">${d.animalId}</td>
    <td class="td2">${d.animalName}</td>
    <td class="td2">${d.cageNum}</td>
    <td class="td2">${d.legsNum}</td>
    <td class="td2 trash_button">click for strikethrough</td>
  </tr>`;
});

$(document).ready(function () {
  $(document).on('click', '.trash_button', function () {
    $(this).closest('tr').toggleClass('strikethrough');
  });
});

function CreateTableFromJSON() {
  $('#showData').html(tableBody);
}

CSS #

#table {
  overflow-x: auto;
  overflow-y: auto;
  position: absolute;
  left: 5%;
  top: 30%;
  width: 90%;
  align-content: center;
  font-size:12px;
  border-collapse:collapse;
  border: 2px solid black;
}
.tr {
  font-weight:bold;
  border: 2px solid black;
  height: 17%;
}
.tr1 {
  background:#16A1E7;
  height: 80px;
}
.tr2 {
  background: #ffffff;
  transition: 0.4s;
  height: 80px;
}
.tr2:hover {
  background-color: cyan;
  transition: 0.4s;
}
.td1 {
  justify-items: center;
  align-items: center;
  text-align: center;
  color:white;
  border: 2px solid black;
  height: 17%;
}
.td2 {
  justify-items: center;
  align-items: center;
  text-align: center;
  color:black;
  border: 2px solid black;
  height: 17%;
}

/* 修改后的删除线样式 */
.tr2.strikethrough {
  position: relative;
}

.tr2.strikethrough::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  border-bottom: 2px solid #ff0000;
  transform: translateY(-50%);
}

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