JS实现鼠标移动表格指定边框位置，插入行列

在JavaScript中，你可以通过监听鼠标的mousemove事件，并结合元素的位置信息，动态调整表格（table）的行和列插入点。下面是一个基本的示例，展示如何实现在鼠标移动到表格边框时插入新行或列：

// 获取表格元素
var table = document.getElementById('your-table-id');

// 创建一个函数处理鼠标移动事件
function updateTablePosition(event) {
    var cell = getCellAtCursor(event, table);
    
    // 检查鼠标是否在表头或表尾边框上
    if (isOnHeader(cell)) {
        insertRowBefore(cell);
    } else if (isOnFooter(cell)) {
        insertRowAfter(cell);
    } else { // 鼠标在单元格边框
        if (event.target.classList.contains('td-border')) {
            insertColumnLeft(cell);
        } else if (event.target.classList.contains('td-right-border')) {
            insertColumnRight(cell);
        }
    }
}

// 辅助函数获取鼠标下的单元格
function getCellAtCursor(event, table) {
    var cell = event.target;
    while (cell.tagName.toLowerCase() !== 'td') {
        cell = cell.parentNode;
    }
    return cell;
}

// 判断鼠标是否在表头或表尾
function isOnHeader(cell) {
    return cell.parentNode.tagName.toLowerCase() === 'thead';
}

// 功能函数，根据不同情况插入行或列
function insertRowBefore(cell) {
    var newRow = table.insertRow(-1);
    newRow.insertBefore(document.createElement('td'), cell);
}

function insertRowAfter(cell) {
    var newRow = table.insertRow(table.rows.length);
    newRow.appendChild(document.createElement('td'));
}

function insertColumnLeft(cell) {
    var newCol = table.insertColumn(-1);
    newCol.appendChild(document.createElement('th')); // 如果在表头，插入th标签
    cell.cellIndex++;
}

function insertColumnRight(cell) {
    var newCol = table.insertColumn(cell.cellIndex + 1);
    newCol.appendChild(document.createElement('th')); // 如果在表头，插入th标签
}

// 添加mousemove事件监听
table.addEventListener('mousemove', updateTablePosition);

在这个例子中，我们假设你已经有了一个id为`your-table-id`的表格，并且每个单元格都有`.td-border`和`.td-right-border`等用于标识边界的class。你需要根据实际的HTML结构调整相应的元素选择器。