如何用JavaScript实现内嵌双输入框的行列网格矩形？

不用Canvas，直接用HTML+CSS+JavaScript构建DOM元素即可——Canvas是基于位图的绘图系统，无法直接嵌入原生表单控件，而DOM元素天然支持嵌套和交互。以下是具体实现方法：

1. HTML结构 #

先搭建基础的输入控件和网格容器：

<!-- 行列输入区 -->
<div class="input-controls">
  <input type="number" id="rowInput" placeholder="行数" min="1" value="2">
  <input type="number" id="colInput" placeholder="列数" min="1" value="3">
  <button id="generateBtn">生成网格</button>
</div>

<!-- 网格容器 -->
<div id="gridContainer"></div>

2. CSS样式 #

用CSS模拟矩形边框，并通过Grid布局实现行列排列，同时调整内部输入框的样式：

.input-controls {
  margin-bottom: 20px;
}

#gridContainer {
  display: grid;
  gap: 10px; /* 网格项之间的间距 */
}

.grid-item {
  border: 2px solid #000; /* 模拟矩形边框 */
  padding: 15px;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.grid-item input {
  padding: 8px;
  width: 80px;
}

3. JavaScript逻辑 #

监听按钮点击事件，根据输入的行列数动态生成网格项，每个网格项内嵌入两个输入框：

const generateBtn = document.getElementById('generateBtn');
const gridContainer = document.getElementById('gridContainer');
const rowInput = document.getElementById('rowInput');
const colInput = document.getElementById('colInput');

generateBtn.addEventListener('click', () => {
  const rows = parseInt(rowInput.value);
  const cols = parseInt(colInput.value);
  
  // 清空现有网格
  gridContainer.innerHTML = '';
  
  // 设置网格行列数
  gridContainer.style.gridTemplateRows = `repeat(${rows}, auto)`;
  gridContainer.style.gridTemplateColumns = `repeat(${cols}, auto)`;
  
  // 循环生成每个网格项
  for (let i = 0; i < rows * cols; i++) {
    const gridItem = document.createElement('div');
    gridItem.className = 'grid-item';
    
    // 创建两个输入框
    const input1 = document.createElement('input');
    input1.type = 'text';
    input1.placeholder = '输入1';
    
    const input2 = document.createElement('input');
    input2.type = 'text';
    input2.placeholder = '输入2';
    
    // 把输入框加入网格项
    gridItem.appendChild(input1);
    gridItem.appendChild(input2);
    
    // 把网格项加入容器
    gridContainer.appendChild(gridItem);
  }
});

关键说明 #

• 用div.grid-item模拟矩形，通过border属性实现边框效果，完全替代Canvas绘制的矩形
• 利用CSS Grid的repeat()函数快速设置行列布局，比手动计算位置更高效
• 每个网格项是独立的DOM元素，内部可以自由嵌套任何表单控件，支持原生交互（输入、聚焦等）

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