如何通过JavaScript根据用户输入值动态生成HTML表格？

代码运行显示NaN、无法正常渲染表格，由三个核心问题导致：

• 字符串拼接逻辑错误：JavaScript不支持用乘法运算符*直接重复拼接字符串，当字符串和数字执行乘法运算时，JS会尝试把字符串隐式转为数值，转换失败就会返回NaN，最终赋值给innerHTML的内容就是NaN，这是页面显示异常的直接原因。
• 取值时机不对：脚本在页面刚加载时就读取了两个输入框的value，此时用户还没输入内容，拿到的是空字符串，就算拼接逻辑正确，也获取不到用户点击按钮时实际输入的行列数值。
• HTML结构不符合规范：外层class为workTable的标签下直接嵌套
  子元素，违反了HTML表格的嵌套规则（table的直接子元素只能是表格相关标签如tr、thead、tbody等），浏览器会自动修正错乱的DOM结构，导致后续渲染目标表格时出现位置异常。

  修正方案 #

  修正后的JavaScript代码 #

  把取值逻辑移到按钮点击回调内，用字符串原生的repeat()方法实现重复拼接，同时对输入值做整数转换和兜底处理：

  const printBtn = document.getElementById('btn');
  const targetTable = document.getElementById('table');
  
  printBtn.addEventListener('click', function(){
      // 点击按钮时再读取最新的输入值，转为整数，非法值默认取0
      const colCount = parseInt(document.getElementById('txtColumns').value) || 0;
      const rowCount = parseInt(document.getElementById('txtRows').value) || 0;
      
      // 生成对应数量的单元格、行字符串
      const cellStr = '<td></td>'.repeat(colCount);
      const rowStr = `<tr>${cellStr}</tr>`.repeat(rowCount);
      
      // 渲染到表格内
      targetTable.innerHTML = rowStr;
  })
  

  修正后的HTML代码 #

  把嵌套错误的目标表格区域移到外层表格外部，同时给数字输入框加最小值限制，避免用户输入无效的负数或0：

  <html>
      <head>
          <meta charset="utf-8">
          <link rel="stylesheet" href="style.css">
      </head>
      <body>
          <table class="workTable">
              <tr>
                  <td>
                      <input type="number" placeholder="Columns Number" id="txtColumns" min="1">
                  </td>
                  <td>
                      <input type="number" placeholder="Rows Number" id="txtRows" min="1">
                  </td>
              </tr>
              <tr>
                  <td colspan="2" align="center">
                      <button id="btn">
                          Print
                      </button>
                  </td>
              </tr>
          </table>
          <!-- 目标表格区域移到外层表格外部，符合DOM嵌套规范 -->
          <div>
              <table id="table" border="1" cellpadding="8" cellspacing="0">
                  <!-- 动态生成的表格内容将渲染在这里 -->
              </table>
          </div>
          <script src="script.js"></script>
      </body>
  </html>
  

  如果需要调整生成表格的样式，直接在style.css中编写对应选择器的样式即可，比如设置单元格宽高、边框颜色、背景色等。

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