如何用jQuery动态创建带复选框的表头？代码问题排查

问题出在哪？ #

你代码里的核心问题是：把$th定义成了普通字符串，而不是jQuery对象。当你尝试用$cbkSelectAll.appendTo($th)时，jQuery没办法把复选框追加到一个字符串上——它需要操作的是实际的DOM元素或者被jQuery包装后的对象。这一步相当于白做了，最后追加到表头的只是不带复选框的纯<th>标签，所以你看不到复选框。

两种可行的解决办法 #

方法一：先创建jQuery对象的元素（推荐，更安全） #

这种方式先把<th>变成可操作的jQuery对象，再往里加复选框：

// 1. 创建带class的<th> jQuery对象
var $th = $('<th>', { class: 'width-110' });
// 2. 创建复选框元素
var $cbkSelectAll = $('<input />', { type: 'checkbox' });
// 3. 把复选框追加到<th>里
$cbkSelectAll.appendTo($th);
// 4. 如果需要在复选框旁加文字，追加到<th>中
$th.append(devCentre);
// 5. 把做好的<th>加到表头行
$('#tblTable1 thead tr:first-child').append($th);

方法二：直接拼接HTML字符串（适合简单场景） #

如果你的devCentre是安全的静态内容，也可以直接把复选框的HTML拼进<th>字符串里：

var $th = '<th class="width-110"><input type="checkbox">' + devCentre + '</th>';
$('#tblTable1 thead tr:first-child').append($th);

注意：如果devCentre包含用户输入的内容，这种写法有XSS风险，优先用第一种方法。

额外小建议 #

如果要实现表头复选框的全选/全不选功能，可以给复选框绑定点击事件：

$cbkSelectAll.on('click', function() {
  // 同步所有tbody里的复选框状态
  $('#tblTable1 tbody input[type="checkbox"]').prop('checked', $(this).prop('checked'));
});

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