具有水平滚动条时添加删除线表行

<div style="overflow-x: scroll;">
  <table>
    <thead>
      <tr>
        <th>表头1</th>
        <th>表头2</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>内容1</td>
        <td>内容2</td>
        <td>
          <button onclick="deleteRow(this)">删除</button>
        </td>
      </tr>
      <tr>
        <td>内容3</td>
        <td>内容4</td>
        <td>
          <button onclick="deleteRow(this)">删除</button>
        </td>
      </tr>
      <!-- 更多行... -->
    </tbody>
  </table>
</div>

div {
  overflow-x: scroll;
  max-width: 500px; /* 根据实际情况设置合适的宽度 */
}

table {
  width: 100%;
  border-collapse: collapse;
}

td, th {
  border: 1px solid #000;
  padding: 8px;
}

tr.deleted td {
  text-decoration: line-through;
}

function deleteRow(button) {
  var row = button.parentNode.parentNode;
  row.classList.add("deleted");
  row.remove(); // 或者根据实际需求处理行的删除逻辑
}