首次独立开发遇阻：如何实现表单输入随机逐行添加到表格input[type='text']

嘿，恭喜你第一次独立开发功能！遇到这个小坎儿太正常了，我来帮你把问题捋顺～

你现在的核心问题应该是：提交时把所有生成的input都塞进了同一个表格行（<tr>）里，所以才会挤在一行显示。咱要实现的是每个名字对应一个独立的表格行，每行只放一个带名字的input。

我给你写个完整的示例，每一步都给你解释清楚：

第一步：先搭好基础HTML结构 #

<form id="nameForm">
  <input type="text" id="nameInput" placeholder="输入名字，用逗号分隔，比如david, jan, mark">
  <button type="submit">提交</button>
</form>

<table id="nameTable" border="1">
  <thead>
    <tr>
      <th>随机名字</th>
    </tr>
  </thead>
  <tbody id="tableBody">
    <!-- 动态生成的行会放在这里 -->
  </tbody>
</table>

第二步：写核心的JavaScript逻辑 #

const form = document.getElementById('nameForm');
const input = document.getElementById('nameInput');
const tableBody = document.getElementById('tableBody');

form.addEventListener('submit', function(e) {
  e.preventDefault(); // 阻止表单默认跳转，不然页面会刷新
  
  // 1. 处理输入内容：把输入的字符串拆成单个名字的数组，清理掉多余空格和空项
  const names = input.value.split(',')
    .map(name => name.trim()) // 去掉每个名字前后的空格
    .filter(name => name); // 过滤掉空内容（比如用户输入多个逗号的情况）
  
  // 先判断有没有有效输入
  if (names.length === 0) {
    alert('请输入有效的名字哦！');
    return;
  }
  
  // 2. 给名字数组做随机排序（用Fisher-Yates洗牌算法，这是最公平的随机方式）
  function shuffleNames(arr) {
    const newArr = [...arr]; // 复制原数组，避免修改用户输入的原始数据
    for (let i = newArr.length - 1; i > 0; i--) {
      const randomIndex = Math.floor(Math.random() * (i + 1));
      // 交换位置
      [newArr[i], newArr[randomIndex]] = [newArr[randomIndex], newArr[i]];
    }
    return newArr;
  }
  
  const shuffledNames = shuffleNames(names);
  
  // 3. 可选：清空表格之前的内容（如果你想每次提交都替换掉旧内容的话）
  tableBody.innerHTML = '';
  
  // 4. 遍历随机后的名字，逐行添加到表格
  shuffledNames.forEach(name => {
    // 创建一个新的表格行
    const row = document.createElement('tr');
    // 创建一个单元格
    const cell = document.createElement('td');
    // 创建input元素，把名字设为它的值
    const nameInput = document.createElement('input');
    nameInput.type = 'text';
    nameInput.value = name;
    
    // 把元素一层一层组装起来：input放进单元格，单元格放进行，行放进表格主体
    cell.appendChild(nameInput);
    row.appendChild(cell);
    tableBody.appendChild(row);
  });
  
  // 可选：提交后清空输入框
  input.value = '';
});

关键要点解释： #

• 为什么之前会同行？ 大概率是你把所有input都塞进了同一个<tr>的<td>里，现在我们给每个名字单独创建<tr>，自然就会逐行显示了。
• Fisher-Yates洗牌：比网上常见的sort(() => Math.random() - 0.5)要公平得多，不会出现某些元素永远排不到前面的情况。
• 输入处理：用trim()和filter()是为了兼容用户的不规范输入（比如名字前后加空格、多打了逗号）。

如果你的需求是保留之前的表格内容，每次提交追加新行，只需要删掉tableBody.innerHTML = ''这一行就行；如果用户是用换行分隔名字，把split(',')改成split('\n')就可以适配。

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