如何实现按字母-数字规则将文本自动填入网格指定单元格-js教程-PHP中文网

如何实现按字母-数字规则将文本自动填入网格指定单元格

本文介绍如何使用 jQuery 实现一键将左侧蓝色文本块（如 H1 Text、G3 Text）按行列坐标（H→G→F…，1→2→…6）自动填充到右侧网格对应位置（如 H1 单元格位于第7行第1列），无需手动拖拽，提升交互效率。

本文介绍如何使用 jquery 实现一键将左侧蓝色文本块（如 `h1 text`、`g3 text`）按行列坐标（h→g→f…，1→2→…6）自动填充到右侧网格对应位置（如 `h1` 单元格位于第7行第1列），无需手动拖拽，提升交互效率。

在构建可交互的网格布局（如教学排课表、棋盘式任务看板或字母索引布局面板）时，常需将带语义标识的文本（如 H1 Text、G4 Text）精准注入网格中对应坐标位置。本教程提供一种轻量、可靠且易于扩展的 JavaScript + jQuery 实现方案，核心在于解析文本前缀 → 映射为二维网格索引 → 批量注入空内容区。

✅ 核心逻辑解析

目标文本格式统一为 XN Text（如 H1、G6），其中：

首字符 X 表示行号：A=0, B=1, ..., H=7（ASCII 码减去 'A' 即 charCodeAt(0) - 65）；
次字符 N 表示列号（1-indexed）：1→第1列，6→第6列，需转换为 0-indexed（即 N - 1）；
网格采用 12 列 × N 行 布局（CSS grid-template-columns: repeat(12, 1fr)），因此单元格线性索引 = row × 12 + column。

例如：

H1 Text → H = 7, 1 = 0 → 索引 = 7 × 12 + 0 = 84
G6 Text → G = 6, 6 = 5 → 索引 = 6 × 12 + 5 = 77

⚠️ 注意：实际 HTML 中 .item 元素按从左到右、从上到下顺序排列，与 CSS Grid 渲染顺序一致，因此线性索引可直接用于 $(".content")[index] 定位。

✅ 完整 `moveText()` 函数实现

function moveText() {
  // 遍历所有可拖拽文本元素（.words）
  $('.words').each(function(index, element) {
    const text = element.textContent.trim();
    if (!text) return; // 跳过空内容

    // 提取首字母（行）和第二字符（列数字），支持 H1、G6 等格式
    const rowChar = text[0];
    const colChar = text[1];

    // 验证是否为有效字母+数字组合（如 H1, G6）
    if (!/[A-Z]/.test(rowChar) || !/\d/.test(colChar)) {
      console.warn(`跳过无效格式文本: "${text}" —— 期望格式如 "H1", "G6"`);
      return;
    }

    const row = rowChar.charCodeAt(0) - 65; // A→0, B→1, ..., H→7
    const col = parseInt(colChar, 10) - 1;  // "1"→0, "6"→5

    // 计算目标 content 元素的线性索引（基于 12 列布局）
    const targetIndex = row * 12 + col;

    // 获取所有 .content 元素，确保索引存在
    const contents = $(".content");
    if (targetIndex >= 0 && targetIndex <h3>✅ 关键注意事项</h3>

DOM 结构依赖：.content 必须是 .item 的直接子元素，且无额外空白文本节点（否则 :empty 伪类可能失效）；
ID 非必需：本方案不依赖任何 id 属性，仅通过文本内容解析 + 线性索引定位，大幅降低 HTML 维护成本；
容错增强：添加了格式校验（正则 /[A-Z]/ 和 /\d/）与越界检查，避免运行时错误；
性能友好：使用原生 element.textContent 和 $(".content") 批量获取，避免高频 DOM 查询；
可扩展提示：若需支持 AA1、Z10 等多字母行标，可升级为 getColumnIndex() 和 getRowIndex() 工具函数（类似 Excel 列名解析）。