html给表格单元格添加左右键的js代码

HTML表格单元格通常不会直接内置键盘操作，比如左右箭头。但是你可以通过JavaScript来模拟这样的功能。下面是一个简单的例子，使用`addEventListener`给每个单元格添加点击事件，然后根据点击的方向切换相邻单元格：

<table id="myTable">
    <tr>
        <td>cell 1</td>
        <td>cell 2</td>
    </tr>
    <!-- 更多行和列 -->
</table>

<script>
    const table = document.getElementById('myTable');
    let currentCell = null; // 当前选中的单元格

    function handleCellClick(event) {
        if (currentCell) {
            event.preventDefault(); // 阻止默认的表单提交等行为

            // 根据点击位置判断是向左还是向右移动
            if (event.target.previousElementSibling) { // 向左
                currentCell.classList.remove('selected');
                currentCell = currentCell.previousElementSibling;
            } else if (event.target.nextElementSibling) { // 向右
                currentCell.classList.remove('selected');
                currentCell = currentCell.nextElementSibling;
            }

            currentCell.classList.add('selected'); // 选择新的单元格
        }
    }

    // 获取所有单元格并添加点击事件
    table.querySelectorAll('td').forEach(cell => {
        cell.addEventListener('click', handleCellClick);
        cell.addEventListener('mouseover', () => {
            if (!currentCell || cell !== currentCell) {
                currentCell?.classList.remove('selected');
            }
            cell.classList.add('selected'); // 鼠标悬停时高亮当前单元格
        });
    });
</script>

<style>
    .selected {
        background-color: lightblue; /* 可视化显示选中的单元格 */
    }
</style>

在这个例子中，我们假设表格已经被HTML结构化，并且每个单元格都有`<td>`标签。这个脚本会为每个单元格添加鼠标点击和悬停效果，使得点击左/右侧时可以切换到相邻的单元格。