如何在jQuery中按索引查找TD并修改单元格innerHTML

API 探路者

2026-8-20

按行/列索引操作表格单元格（jQuery实现）

核心实现逻辑

要根据行、列索引定位表格单元格并修改内容，可通过jQuery的索引选择器结合DOM操作完成，具体步骤如下：

1. 按行/列索引定位td元素

jQuery的:eq()选择器可通过索引精准定位元素，注意：jQuery的索引从0开始计数，如果你的localStorage键是1开头的行/列号，需要先转换为0-based索引。

定位方式：

先通过$('tr:eq(行索引)')获取指定行的<tr>元素
再在该行内通过find('td:eq(列索引)')锁定目标<td>

2. 修改单元格内容

获取到目标td后，可使用jQuery的.html()方法直接修改内容，也可以用原生DOM的.innerHTML属性操作。

整合到LFLS函数的完整代码

结合你提供的代码，完善后的LFLS函数如下：

function LFLS() {
    // LFLS => load from local Storage
    for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i); // 格式如"1,2","2,5"等
        const [rowStr, colStr] = key.split(",");
        // 转换为0-based索引（若行/列号从1开始）
        const rowIndex = parseInt(rowStr) - 1;
        const colIndex = parseInt(colStr) - 1;
        
        // 获取对应单元格并修改内容
        const cell = $(`tr:eq(${rowIndex})`).find(`td:eq(${colIndex})`);
        if (cell.length) {
            // 从localStorage取值并设置到单元格
            cell.html(localStorage.getItem(key));
            // 原生DOM写法：cell[0].innerHTML = localStorage.getItem(key);
        }
    }
}