点击按钮向表格行追加td时仅显示文本而非标签的问题求助

嘿，我一眼就看出问题出在哪啦！你在jQuery的each循环里直接用了DOM元素的原生append()方法——这个方法的特性就是把传入的字符串当作纯文本插入，不会把它解析成HTML标签，所以才会显示<td id=xxx class='not-shaded'></td>这段文字，而不是真正的表格单元格。

下面给你两种靠谱的解决办法：

方法一：转成jQuery对象调用append() #

把循环里的this用$(this)包裹成jQuery对象，用jQuery的append()方法，它会自动识别并解析HTML字符串：

function addColmn() { 
  $('tr').each(function(){ 
    // 给id加单引号避免语法嵌套问题
    $(this).append("<td id='" + maxId + "' class='not-shaded'></td>"); 
    maxId++; 
  }); 
}

方法二：用原生insertAdjacentHTML()方法 #

如果你不想依赖jQuery的方法，也可以用原生DOM的insertAdjacentHTML()，它专门用来插入HTML片段：

function addColmn() { 
  $('tr').each(function(){ 
    this.insertAdjacentHTML('beforeend', "<td id='" + maxId + "' class='not-shaded'></td>"); 
    maxId++; 
  }); 
}

额外优化：用ES6模板字符串让代码更清晰 #

如果你的环境支持ES6，用模板字符串可以彻底避免引号嵌套的麻烦，代码可读性更高：

function addColmn() { 
  $('tr').each(function(){ 
    $(this).append(`<td id="${maxId}" class="not-shaded"></td>`); 
    maxId++; 
  }); 
}

小提醒：修正HTML结构 #

另外，你的HTML里把<button>放在了<table>内部，这不符合HTML规范哦！表格标签内只能放<thead>、<tbody>、<tr>这类表格相关元素，按钮应该移到表格外面，避免浏览器自动修正DOM导致的奇怪问题：

<button onclick="addColmn()">Add column</button>
<table border="1">
  <tr>
    <td onclick="changeState(this);" id="cell1" class="not-shaded"></td>
    <td onclick="changeState(this);" id="cell2" class="not-shaded"></td>
  </tr>
  <tr>
    <td onclick="changeState(this);" id="cell3" class="not-shaded"></td>
    <td onclick="changeState(this);" id="cell4" class="not-shaded"></td>
  </tr>
</table>

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