首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用JS/HTML将行的一部分从一个表移动到另一个表,并使用onclick删除其余行

使用JS/HTML将行的一部分从一个表移动到另一个表,并使用onclick删除其余行的实现可以通过以下步骤完成:

  1. HTML结构: 首先,需要在HTML中创建两个表格,一个是源表格,另一个是目标表格。给每个表格添加一个id属性,以便在JavaScript中引用它们。同时,在源表格中的每一行的最后添加一个删除按钮。
代码语言:html
复制
<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>
  1. JavaScript函数: 接下来,需要编写JavaScript函数来实现移动行和删除其余行的功能。
代码语言:javascript
复制
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);
  }
}
  1. 添加删除按钮的点击事件: 为了实现点击删除按钮时删除其余行的功能,需要在HTML中添加一个删除按钮,并为其添加一个onclick事件,调用deleteRows函数。
代码语言:html
复制
<button onclick="deleteRows()">删除其余行</button>

这样,当点击源表格中的移动按钮时,会将当前行的数据复制到目标表格,并从源表格中删除当前行。而点击删除按钮时,会删除源表格中除表头外的所有行。

这是一个基本的实现,可以根据具体需求进行扩展和优化。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的沙龙

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券