为何设置终止条件后仍出现类无限循环？附JS动态表代码

嘿，你遇到的这个看起来像无限循环的问题，其实是字符串和数字的隐式拼接在搞鬼！

问题根源 #

从输入框获取的value属性默认是字符串类型，比如你输入5，实际拿到的是"5"。当你写row+1的时候，JavaScript不会把它当成数字加法，而是字符串拼接——"5"+1会变成"51"！

这就导致你的循环条件完全跑偏了：

• 外层循环原本期望i < 6（5+1），结果变成了i < "51"，字符串和数字比较时会转成数字，也就是循环要跑51次（从0到50）
• 内层循环同理，会从0跑到50，总共执行51次

这么一来，表格会生成51行×51列的单元格，加载起来特别慢，看起来就像无限循环了。

修复方案 #

核心就是把获取到的行列值转换成数字类型，同时可以优化下输入校验和代码规范：

function addtable() {
  // 将输入值转换为数字，同时处理非数字的情况
  const row = Number(document.getElementById('row1').value);
  const col = Number(document.getElementById('col1').value);

  // 增强输入校验：确保是有效正整数
  if (isNaN(row) || isNaN(col) || row <= 0 || col <= 0) {
    alert("Please Enter valid positive numbers for Row & Column");
    return;
  }

  const table = document.createElement('table');
  // 给表格加边框，方便查看效果
  table.style.borderCollapse = 'collapse';

  // 如果原本的row+1是想做多一行表头，这里可以改成i < row + 1
  for (let i = 0; i < row; i++) {
    const tr = document.createElement('tr');
    table.appendChild(tr);

    // 同理，col+1如果是额外列需求，改成j < col + 1即可
    for (let j = 0; j < col; j++) {
      const td = document.createElement('td');
      td.style.border = '1px solid #ccc';
      td.style.padding = '4px';
      tr.appendChild(td);

      const input = document.createElement('input');
      input.type = 'text';
      input.style.width = '60px';
      td.appendChild(input);
    }
  }

  // 别忘了把创建好的表格添加到页面中（原代码缺少这一步）
  document.body.appendChild(table);
  return 0;
}

额外优化点 #

• 用let/const替代var，避免变量提升带来的作用域问题
• 增强了输入校验，防止用户输入非数字、0或者负数
• 给表格和单元格加了基础样式，创建后能直观看到效果
• 补充了表格插入DOM的步骤，不然创建的表格只会存在于内存中

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