js动态构建可以置顶、置底、上移、下移

在JavaScript编程中，动态构建可操作的表格是一种常见的需求，特别是在数据展示和管理的应用场景中。本篇文章将详细探讨如何使用JavaScript实现一个功能完备的表格，包括置顶、置底、上移、下移、添加和删除行的操作。 我们需要创建一个基本的HTML结构，包含一个`<table>`元素，以及用于控制表格操作的按钮。例如： ```html <table id="dynamicTable"> <thead> <tr> <th>列1</th> <th>列2</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <button id="addRow">添加行</button> <button id="moveTop">置顶</button> <button id="moveBottom">置底</button> <button id="moveUp">上移</button> <button id="moveDown">下移</button> <button id="deleteRow">删除行</button> ``` 接下来，我们使用JavaScript（这里假设使用了ES6语法）来处理这些操作： 1. **添加行**：通过`document.createElement('tr')`创建新行，并向`<tbody>`中插入。每个单元格可以使用`<td>`标签创建，内容可以是动态输入或预先定义的数据。 ```javascript const addRow = () => { const row = document.createElement('tr'); const cells = ['数据1', '数据2'].map(data => `<td>${data}</td>`).join(''); const deleteButton = `<td><button class="delete">删除</button></td>`; row.innerHTML = `${cells}${deleteButton}`; document.getElementById('dynamicTable').getElementsByTagName('tbody')[0].appendChild(row); }; ``` 2. **置顶、置底**：这两个操作需要获取当前选中的行，然后将其与表头后的第一行或最后一行交换位置。可以利用`insertBefore`或`appendChild`方法。 ```javascript const moveTop = () => { const selectedRow = getSelectedRow(); if (selectedRow && selectedRow != table.firstChild) { table.insertBefore(selectedRow, table.firstChild); } }; const moveBottom = () => { const selectedRow = getSelectedRow(); if (selectedRow && selectedRow != table.lastChild) { table.appendChild(selectedRow); } }; ``` 3. **上移、下移**：与置顶和置底类似，但这次是与相邻的行交换位置。 ```javascript const moveUp = () => { const selectedRow = getSelectedRow(); if (selectedRow && selectedRow.previousElementSibling) { selectedRow.parentNode.insertBefore(selectedRow, selectedRow.previousElementSibling); } }; const moveDown = () => { const selectedRow = getSelectedRow(); if (selectedRow && selectedRow.nextElementSibling) { selectedRow.parentNode.insertBefore(selectedRow.nextElementSibling, selectedRow); } }; ``` 4. **删除行**：获取到选中的行并移除它。 ```javascript const deleteRow = () => { const selectedRow = getSelectedRow(); if (selectedRow) { selectedRow.remove(); } }; const getSelectedRow = () => { // 获取被点击的行，这里假设用户点击了行中的“删除”按钮 const clickedRow = document.querySelector('.delete').closest('tr'); return clickedRow; }; ``` 以上代码示例实现了动态构建的表格，包括添加、删除、置顶、置底、上移和下移的功能。需要注意的是，这只是一个基础实现，实际应用中可能需要考虑更多细节，如错误处理、多选行操作、用户交互反馈等。在实际项目中，你可能还需要考虑数据绑定和状态管理，例如使用Vue.js或React等现代前端框架。