CSS, Javascript, XSL, 将表格中的一行移动到表格底部

Question

我有一个正在处理的样式表，其中从样式表生成的 html 文件有一个切换按钮，用于将按钮在一行中、在表格中从勾号更改为十字。默认情况下，所有按钮都以选中（打勾）的形式出现……当单击按钮时，勾号变为十字形。我想要发生但不能做的是在单击时将整个行移动到表格的底部。最终结果是单击一行时，切换变为十字并移动到表格的底部。

感谢您的帮助

勾选/交叉码

/* Customize the label (the container) */
.customcheck {
  position: relative;
}

.customcheck input {
  display: none;
}

.customcheck input~.checkmark {
  background: #ee0b0b;
  width: 25px;
  display: inline-block;
  position: relative;
  height: 25px;
  border-radius: 2px;
  vertical-align:middle;
  margin-right:10px;
}

.customcheck input~.checkmark:after,
.customcheck input~.checkmark:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 16px;
  background: #fff;
  left: 12px;
  top: 4px;
}

.customcheck input~.checkmark:after {
  transform: rotate(-45deg);
  z-index: 1;
}

.customcheck input~.checkmark:before {
  transform: rotate(45deg);
  z-index: 1;
}

.customcheck input:checked~.checkmark {
  background: #3d8a00;
  width: 25px;
  display: inline-block;
  position: relative;
  height: 25px;
  border-radius: 2px;
}

.customcheck input:checked~.checkmark:after {
  display: none;
}

.customcheck input:checked~.checkmark:before {
  background: none;
  border: 2px solid #fff;
  width: 6px;
  top: 2px;
  left: 9px;
  border-top: 0;
  border-left: 0;
  height: 13px;
  top: 2px;
}

....样式表条目....

<tr class="clickable">
          
<td>
<label class="customcheck">
  <input type="checkbox" checked="checked"/>
  <span class="checkmark"></span>
</label>
</td>

Answer 1

使用appendChild 将点击label 的tr 移动到其tbody 容器的底部：

document.querySelectorAll('tr.clickable').forEach(
  l => l.addEventListener(
         'click', 
         e => e.currentTarget.parentNode.appendChild(e.currentTarget)
       )
);

/* Customize the label (the container) */
.customcheck {
  position: relative;
}

.customcheck input {
  display: none;
}

.customcheck input~.checkmark {
  background: #ee0b0b;
  width: 25px;
  display: inline-block;
  position: relative;
  height: 25px;
  border-radius: 2px;
  vertical-align:middle;
  margin-right:10px;
}

.customcheck input~.checkmark:after,
.customcheck input~.checkmark:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 16px;
  background: #fff;
  left: 12px;
  top: 4px;
}

.customcheck input~.checkmark:after {
  transform: rotate(-45deg);
  z-index: 1;
}

.customcheck input~.checkmark:before {
  transform: rotate(45deg);
  z-index: 1;
}

.customcheck input:checked~.checkmark {
  background: #3d8a00;
  width: 25px;
  display: inline-block;
  position: relative;
  height: 25px;
  border-radius: 2px;
}

.customcheck input:checked~.checkmark:after {
  display: none;
}

.customcheck input:checked~.checkmark:before {
  background: none;
  border: 2px solid #fff;
  width: 6px;
  top: 2px;
  left: 9px;
  border-top: 0;
  border-left: 0;
  height: 13px;
  top: 2px;
}

<table>
  <thead>
    <tr>
      <th>data</th>
      <th>action</th>
    </tr>
  </thead>
  <tbody>
    <tr class="clickable">
       <td>row 1</td>
       <td><label class="customcheck"><input type="checkbox" checked><span class="checkmark"></span></label></td>
    </tr><tr class="clickable">
       <td>row 2</td>
       <td><label class="customcheck"><input type="checkbox" checked><span class="checkmark"></span></label></td>
    </tr><tr class="clickable">
       <td>row 3</td>
       <td><label class="customcheck"><input type="checkbox" checked><span class="checkmark"></span></label></td>
    </tr><tr class="clickable">
       <td>row 4</td>
       <td><label class="customcheck"><input type="checkbox" checked><span class="checkmark"></span></label></td>
    </tr><tr class="clickable">
       <td>row 5</td>
       <td><label class="customcheck"><input type="checkbox" checked><span class="checkmark"></span></label></td>
    </tr><tr class="clickable">
       <td>row 6</td>
       <td><label class="customcheck"><input type="checkbox" checked><span class="checkmark"></span></label></td>
    </tr><tr class="clickable">
       <td>row 7</td>
       <td><label class="customcheck"><input type="checkbox" checked><span class="checkmark"></span></label></td>
    </tr><tr class="clickable">
       <td>row 8</td>
       <td><label class="customcheck"><input type="checkbox" checked><span class="checkmark"></span></label></td>
    </tr><tr class="clickable">
       <td>row 9</td>
       <td><label class="customcheck"><input type="checkbox" checked><span class="checkmark"></span></label></td>
    </tr><tr class="clickable">
       <td>row 10</td>
       <td><label class="customcheck"><input type="checkbox" checked><span class="checkmark"></span></label></td>
    </tr>
  </tbody>
</table>