JavaScript生成自定义表格时颜色设置失效问题求助

Hey there! 我一眼就看到了你的颜色功能失效的问题，其实就是两个小细节没处理好，咱们一起来搞定它：

问题根源 #

• 变量未被正确解析：你写的bgcolor = (firstcolor)里，firstcolor会被当成纯文本字符串，而不是你获取到的颜色变量值。JavaScript不会自动把字符串里的变量名替换成实际值，得用专门的方式插入变量才行。
• 字符串换行语法错误：普通的单/双引号字符串在JavaScript里不能直接换行，你原来的fheader字符串换行写法会触发语法报错，直接导致代码执行失败。

修复方案 #

最省心的方式是用ES6模板字符串（用反引号`包裹），它既能直接用${变量名}插入变量，还支持自由换行，完美解决这两个问题。

修改后的createTable函数代码如下：

function createTable() {
  var rowVar = document.getElementById('row').value;
  var columnVar = document.getElementById('column').value;
  var firstcolor = document.getElementById('first-color').value;
  // 用模板字符串替换原写法，正确插入颜色变量
  var fheader = `<table border="1" bgcolor="${firstcolor}">`;
  var fbody = '';
  for( var i=0; i<rowVar;i++) {
    fbody += '<tr>';
    for( var j=0; j<columnVar;j++) {
      fbody += '<td></td>'; // 合并冗余代码，让结构更简洁
    }
    fbody += '</tr>';
  }
  var ffooter = '</table>';
  document.getElementById('table').innerHTML = fheader + fbody + ffooter ;
}

额外优化建议 #

• 如果你想用上第二个颜色选择器，可以在生成<tr>或<td>时，同样用模板字符串插入second-color的变量值，比如给每行加bgcolor="${secondcolor}"。
• 建议给输入框加必填校验，避免用户未填写就点击按钮生成空表格。

这样修改后，颜色变量就能被正确识别，表格背景色会跟着用户选择的颜色同步变化啦！

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