使用JS/HTML将行的一部分从一个表移动到另一个表,并使用onclick删除其余行的实现可以通过以下步骤完成:
<table id="sourceTable">
<tr>
<th>列1</th>
<th>列2</th>
<th>操作</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td><button onclick="moveRow(this)">移动</button></td>
</tr>
<!-- 其他行... -->
</table>
<table id="targetTable">
<tr>
<th>列1</th>
<th>列2</th>
</tr>
</table>
function moveRow(button) {
// 获取当前行
var row = button.parentNode.parentNode;
// 将当前行的数据复制到目标表格
var targetTable = document.getElementById("targetTable");
var newRow = targetTable.insertRow();
for (var i = 0; i < row.cells.length - 1; i++) {
newRow.insertCell().innerHTML = row.cells[i].innerHTML;
}
// 删除源表格中的当前行
row.parentNode.removeChild(row);
}
function deleteRows() {
// 获取源表格
var sourceTable = document.getElementById("sourceTable");
// 删除除表头外的所有行
var rows = sourceTable.getElementsByTagName("tr");
for (var i = rows.length - 1; i > 0; i--) {
sourceTable.deleteRow(i);
}
}
<button onclick="deleteRows()">删除其余行</button>
这样,当点击源表格中的移动按钮时,会将当前行的数据复制到目标表格,并从源表格中删除当前行。而点击删除按钮时,会删除源表格中除表头外的所有行。
这是一个基本的实现,可以根据具体需求进行扩展和优化。
事件流
这一概念源自于对事件触发对象的思考。例如常见的点击事件,鼠标移动事件。这些事件发生之时,往往不只是点击或者移动到某一特定元素上。
比如点击某一个按钮,而它是由上一层的父标签,或许在上一层还有父标签甚至是整个页面。因此点击一个元素可以看成是同时点击了父标签或者整个页面。那么此时事件应该怎么响应到指定标签呢?
事件冒泡
即事件从指定元素开始传播到最外层的元素,并且该事件不仅会在指定元素上发生,还会在传播过过程中的每一个元素上发生。
<html>
<body>
领取专属 10元无门槛券
手把手带您无忧上云