如何使用JavaScript或HTML按钮删除表格高亮选中的指定行

核心问题说明 #

• 删除按钮未指定type属性，默认属于表单提交按钮，点击后会触发页面刷新，导致所有表格行清空，这是你之前调用deleteRow时误以为清空所有行的主要原因
• 原有取消选中函数deselectedRow的this指向错误，导致选中状态重置逻辑异常
• 缺少删除选中行的对应逻辑
• 每次新增行都会给所有历史行重复绑定点击事件，会导致事件多次触发，存在性能问题

修改步骤 #

1. HTML修改 #

删除原有删除按钮的错误属性，新增id和type="button"，避免默认提交表单：

<!-- 替换原有删除按钮的代码 -->
<button class="m-1" type="button" id="deleteBtn"> 
  <i class="icon-remove-sign fs-4"></i>
</button>

2. JS修改 #

（1）修复deselectedRow函数指向问题

function deselectedRow(){
  var table = document.getElementById('displayTable');
  for (var i=0;i < table.rows.length;i++){
    var row = table.rows[i];
    if(row.origColor) {
      row.style.backgroundColor = row.origColor;
    }
    row.selected = false;
  }
}

（2）新增删除选中行逻辑

// 绑定删除按钮点击事件
var deleteBtn = document.getElementById('deleteBtn');
deleteBtn.addEventListener('click', deleteSelectedRow);

function deleteSelectedRow() {
  var table = document.getElementById('displayTable');
  for(var i = 0; i < table.rows.length; i++) {
    var currentRow = table.rows[i];
    if(currentRow.selected) {
      table.deleteRow(i);
      row--; // 修正全局行计数，避免后续新增行位置偏移
      alert('删除成功');
      return;
    }
  }
  alert('请先选中要删除的行');
}

（3）优化行选中事件绑定逻辑

删掉tableDisplay函数末尾的selectedRow()、deselectedRow()调用，替换为只给新增行绑定点击事件，避免重复绑定：

// 写在newRow定义完成、单元格赋值之后，row++之前
newRow.addEventListener('click', function() {
  if(!this.selected){
    deselectedRow();
    this.origColor = this.style.backgroundColor;
    this.style.backgroundColor='#90EE90';
    this.selected = true;
  } else {
    this.style.backgroundColor = this.origColor;
    this.selected = false;
  }
})

原来的selectedRow函数可以直接删除，不再需要调用。

功能测试 #

点击任意数据行即可高亮选中，再点击删除按钮就只会删除选中的行，不会影响其他表格内容，未选中行时点击删除会弹出提示。

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