点击表格自定义复选框切换状态并将对应行移动至表格底部的实现咨询

实现方案 #

核心逻辑 #

利用DOM原生API的特性：对已存在的DOM节点执行appendChild()操作时，会自动将该节点从原位置移除，插入到新的父节点末尾，不需要额外做删除、拷贝操作。

代码实现 #

推荐使用全局事件委托方案，无需修改现有XSL的节点结构，适配所有通过XSL动态生成的表格行：

1. 在XSL生成的HTML文件中插入如下JavaScript代码（可以放在<body>标签末尾或者<head>内）：

document.addEventListener('change', function(e) {
  // 仅响应自定义复选框的状态变更事件
  if (!e.target.matches('.customcheck input[type="checkbox"]')) return
  const currentTr = e.target.closest('tr.clickable')
  const tbody = currentTr.closest('tbody')
  // 仅取消勾选时移动行，若需要每次点击都移动可删掉if判断
  if (!e.target.checked) {
    tbody.appendChild(currentTr)
  }
})

如果希望直接在XSL中绑定事件，修改你的XSL复选框部分代码即可：

<tr class="clickable">
<td>
<label class="customcheck">
  <input type="checkbox" checked="checked" onchange='if(!this.checked){const tr=this.closest("tr.clickable");tr.parentNode.appendChild(tr)}'/>
  <span class="checkmark"></span>
</label>
</td>
<!-- 其余td内容保持不变 -->

注：XSL属性值用单引号包裹，避免内部双引号和XSL语法冲突。

效果说明 #

以上方案完全兼容你现有的自定义复选框样式，点击复选框切换为未勾选状态时，当前行会自动移动到表格最底部，无需额外调整其他代码。

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