在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等现代前端框架。
