使用JavaScript根据输入创建表格遇到问题求助

一、样式不生效的核心问题及修复 #

你的代码里有三个关键错误导致边框样式失效：

• TD标签属性写错：你写成了<td= "width: ...">，正确写法是<td style="...">，而且CSS属性之间必须用分号;分隔，不是逗号,。
• 表格结构混乱：每次循环生成<tr>时都重复添加了<table>标签，最终会生成多个独立表格，应该把<table>放在循环外面，循环只负责生成行和单元格。
• 建议给表格加上border-collapse: collapse，让单元格边框合并，样式更规整。

二、移除单元格计数器 #

单元格里的${i}（行号）和${h}（列号）就是你要去掉的计数器，直接删掉这两个变量即可。

修正后的完整代码 #

getS('.btn-create-table').onclick = function() {
  console.log(event.target)

  const countTr = table.countTr.value;
  const countTd = table.countTd.value;
  const widthTd = table.widthTd.value;
  const heightTd = table.heightTd.value;
  const borderWidth = table.borderWidth.value;
  const borderType = table.borderType.value;
  const borderColor = table.borderColor.value;

  // 清空编辑区域，避免重复叠加内容
  getS('.edit-area').value = '';
  // 外层只写一次表格标签，添加边框合并样式
  getS('.edit-area').value += `<table style="border-collapse: collapse;">`;

  for (let i = 0; i < countTr; i++) {
    // 移除行计数器，给行添加边框（可选，也可以只给单元格加）
    getS('.edit-area').value += `<tr style="border: ${borderWidth} ${borderType} ${borderColor};">`;
    for (let h = 0; h < countTd; h++) {
      // 修正TD的style属性，移除列计数器，用分号分隔CSS属性
      getS('.edit-area').value += `<td style="width: ${widthTd}; height: ${heightTd}; border: ${borderWidth} ${borderType} ${borderColor};">TD</td>`;
    }
    // 闭合行标签（之前漏了这一步）
    getS('.edit-area').value += `</tr>`;
  }

  // 闭合表格标签
  getS('.edit-area').value += '</table>';
  getS('.first').classList.add("show")
  getS('.second').classList.remove("show")
}

额外优化说明 #

• 新增了清空编辑区域的代码，避免多次点击按钮时内容重复叠加。
• 用border简写属性同时设置边框宽度、样式、颜色，比分开写更简洁，也能避免遗漏属性导致样式失效。
• 如果只需要单元格显示边框，可以删掉<tr>标签里的border样式。

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