js将一个table的某列转移到另一个table的上
当前位置：点晴教程→知识管理交流
→『 技术文档交流 』
 ：js将一个table的某列转移到另一个table的上 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <script> function moveTableColumn(sourceTableId, targetTableId, columnIndex) { // 1. 获取源表格和目标表格 const sourceTable = document.getElementById(sourceTableId); const targetTable = document.getElementById(targetTableId);
// 2. 校验表格和列是否存在 if (!sourceTable || !targetTable) { console.error("Source or target table not found."); return; }
const sourceRows = sourceTable.rows; if (sourceRows.length === 0) { console.warn("Source table is empty."); return; }
if (columnIndex < 0 || columnIndex >= sourceRows[0].cells.length) { console.error("Invalid column index."); return; }
// 3. 遍历源表格的每一行，将指定列的单元格移动到目标表格的对应行 for (let i = 0; i < sourceRows.length; i++) { const sourceRow = sourceRows[i]; const sourceCell = sourceRow.cells[columnIndex];
// 确保目标表格的行数足够，如果不够则创建新的行 if (targetTable.rows.length <= i) { const newTargetRow = targetTable.insertRow(); // 在末尾插入新行 } const targetRow = targetTable.rows[i];
// 将源单元格添加到目标表格的行中 targetRow.appendChild(sourceCell); // 移动单元格
// 如果需要复制单元格，而不是移动，使用以下代码： // const clonedSourceCell = sourceCell.cloneNode(true); // 克隆节点（包含子节点） // targetRow.appendChild(clonedSourceCell); }
// 4. (可选) 移除源表格的空列 (不建议，可能破坏表格结构) // 如果你确实想要移除空列，必须在遍历后进行，并考虑表格结构。 // 移除空列的代码会比较复杂，因为需要考虑合并单元格等情况。 // 通常更好的做法是隐藏源表格的列，而不是直接移除。 } </script> <body> <table id="sourceTable" border="1"> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> <tbody> <tr> <td>Row 1, Col 1</td> <td>Row 1, Col 2</td> <td>Row 1, Col 3</td> </tr> <tr> <td>Row 2, Col 1</td> <td>Row 2, Col 2</td> <td>Row 2, Col 3</td> </tr> </tbody> </table>
<table id="targetTable" border="1"> <thead> <tr> <th>New Column</th> </tr> </thead> <tbody> </tbody> </table> <button onclick="moveTableColumn('sourceTable', 'targetTable', 1)">Move Column 2</button> </body> </html> 该文章在 2025/4/19 15:50:21 编辑过 |
关键字查询
相关文章
正在查询... 
|
400 186 1886
