使用jQuery无法打印表格网格问题求助

我看你现在卡在动态生成网格没法正常显示的问题上了，结合你给出的代码片段，我帮你梳理下核心问题，然后给出完整的可运行方案：

首先分析原代码的问题点 #

你原来的代码只创建了<tr>行元素，但没有生成对应的<td>单元格，而且大概率是直接把<tr>放到了.drawing-area容器里——这是不对的，<tr>必须嵌套在<table>标签内才能被浏览器正确渲染成表格结构。另外，输入值没有做类型转换，直接用字符串和数字比较也存在潜在风险。

完整解决方案 #

1. 先确保HTML结构正确

<div class="grid-controls">
  行数: <input type="number" id="row" min="1" value="3" placeholder="输入行数">
  列数: <input type="number" id="col" min="1" value="3" placeholder="输入列数">
  <button id="grid-input">生成网格</button>
</div>
<div class="drawing-area">
  <!-- 生成的网格会放在这里 -->
</div>

2. 修正后的jQuery代码

$(document).ready(function() {
  $("#grid-input").click(function() {
    // 先清空之前的网格内容
    $(".drawing-area").empty();
    
    // 把输入值转成整数，避免字符串比较的问题
    var rows = parseInt($("#row").val());
    var cols = parseInt($("#col").val());
    
    // 严格验证输入：必须是正整数
    if (!isNaN(rows) && !isNaN(cols) && rows > 0 && cols > 0) {
      // 创建表格容器，这是关键！tr必须放在table里
      var $gridTable = $('<table></table>').addClass('custom-grid');
      
      // 循环生成每一行
      for (var i = 1; i <= rows; i++) {
        var $currentRow = $('<tr></tr>').addClass(`row-${i}`);
        
        // 为当前行生成对应列数的单元格
        for (var j = 1; j <= cols; j++) {
          // 可以给单元格加类名或者内容，方便后续操作
          var $cell = $('<td></td>')
            .addClass(`col-${j}`)
            .text(`${i}-${j}`); // 可选：显示行-列标识，方便调试
          
          $currentRow.append($cell);
        }
        
        // 把行添加到表格里
        $gridTable.append($currentRow);
      }
      
      // 最后把表格放到绘图区域
      $(".drawing-area").append($gridTable);
    } else {
      // 输入不合法时给用户提示
      $(".drawing-area").html('<p style="color: red;">请输入有效的正整数行数和列数！</p>');
    }
  });
});

3. 加上CSS让网格可见

没有样式的话，网格可能会看不见，所以补充基础样式：

.custom-grid {
  border-collapse: collapse;
  margin: 20px 0;
}

.custom-grid td {
  border: 1px solid #2c3e50;
  width: 45px;
  height: 45px;
  text-align: center;
  vertical-align: middle;
  background-color: #ecf0f1;
  cursor: pointer; /* 可选：鼠标悬停变指针 */
}

.grid-controls {
  margin: 15px 0;
  padding: 10px;
  background-color: #f8f9fa;
}

.grid-controls input {
  margin: 0 10px;
  padding: 5px;
  width: 80px;
}

核心改进点说明 #

• 表格容器必须有：<tr>不能直接放在div中，必须嵌套在<table>里，这是HTML表格的规范
• 类型转换+输入验证：用parseInt把输入的字符串转成数字，同时用isNaN判断是否为有效数字，避免非法输入导致的错误
• 单元格生成：补充内层循环生成<td>，否则只有行没有单元格，网格自然显示不出来
• 样式优化：添加边框、尺寸和背景色，让网格清晰可见

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