为Figma表格生成器开发类Word的网格式行列选择器

你当前使用range输入框实现的行列选择代码如下：

<fieldset>
<legend>Dimensions</legend>
  <p>
    <label for="countRows">Number of Rows:</label> 
    <input class="range" id="countRows" name="countRows" type="range" value="3" min="0" max="10" oninput="this.nextElementSibling.value = this.value">
    <output>3</output>
  </p>
  <p>
    <label for="countColumns">Number of Columns:</label> 
    <input class="range" id="countColumns" name="countColumns" type="range" value="5" min="1" max="10" oninput="this.nextElementSibling.value = this.value">
    <output>5</output>
  </p>
</fieldset>

要实现类似Microsoft Word的网格式行列选择方案，可以通过以下途径获取相关信息：

• 参考成熟UI组件的实现：查看Element UI、Ant Design等前端组件库中的表格插入控件，分析它们的HTML结构、CSS样式和JavaScript逻辑——这类组件普遍实现了网格选区交互，包括鼠标悬停高亮、拖动选择行列范围等核心功能，能直接复用或参考交互逻辑。
• 学习原生JS交互教程：搜索纯JavaScript实现网格选区的教程，重点掌握mousedown、mousemove、mouseup事件的联动处理，比如如何跟踪鼠标位置计算选中的行列数，实时更新选区视觉反馈，这是实现该交互的核心技术点。
• 分析Figma社区插件案例：在Figma社区查找已有的表格生成类插件，查看它们的UI交互方式，部分插件会采用类似Word的网格选择方案，你可以通过Figma的插件调试工具查看其前端代码，适配到自己的插件中。
• 查阅官方交互设计规范：参考微软Office的交互设计指南，里面详细说明了表格插入时的网格选择交互逻辑、视觉反馈标准，能帮你对齐Word的用户体验细节，比如选区高亮样式、鼠标指针状态变化等。
• 搜索开源代码实现：在代码托管平台搜索“word-like table grid selector”“html table row column picker”这类关键词，找到基于HTML/CSS/JS的轻量级开源组件，直接参考或修改后用于你的Figma插件。

内容的提问来源于stack exchange，提问作者brankoo