DOM方式实现动态添加表格全选方框

好的，我可以为您解答这个问题。

首先，我们可以使用JavaScript中的DOM（文档对象模型）来动态创建表格并添加全选框。以下是实现的步骤：

1. 创建一个表格元素

var table = document.createElement("table");

2. 创建表头

var header = table.createTHead();
var row = header.insertRow(0);
var cell1 = row.insertCell(0);
cell1.innerHTML = "<b>Select</b>";
var cell2 = row.insertCell(1);
cell2.innerHTML = "<b>Name</b>";
var cell3 = row.insertCell(2);
cell3.innerHTML = "<b>Email</b>";

3. 创建表格内容

var tbody = document.createElement("tbody");
for (var i = 0; i < data.length; i++) {
  var row = tbody.insertRow(i);
  var cell1 = row.insertCell(0);
  var checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.name = "select";
  cell1.appendChild(checkbox);
  var cell2 = row.insertCell(1);
  cell2.innerHTML = data[i].name;
  var cell3 = row.insertCell(2);
  cell3.innerHTML = data[i].email;
}
table.appendChild(tbody);

4. 添加全选框

var selectAll = document.createElement("input");
selectAll.type = "checkbox";
selectAll.name = "selectAll";
selectAll.onclick = function() {
  var checkboxes = document.getElementsByName("select");
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = this.checked;
  }
};
header.rows[0].cells[0].appendChild(selectAll);

完整的代码如下：

var data = [
  { name: "John", email: "john@example.com" },
  { name: "Jane", email: "jane@example.com" },
  { name: "Bob", email: "bob@example.com" }
];

var table = document.createElement("table");

var header = table.createTHead();
var row = header.insertRow(0);
var cell1 = row.insertCell(0);
cell1.innerHTML = "<b>Select</b>";
var cell2 = row.insertCell(1);
cell2.innerHTML = "<b>Name</b>";
var cell3 = row.insertCell(2);
cell3.innerHTML = "<b>Email</b>";

var tbody = document.createElement("tbody");
for (var i = 0; i < data.length; i++) {
  var row = tbody.insertRow(i);
  var cell1 = row.insertCell(0);
  var checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.name = "select";
  cell1.appendChild(checkbox);
  var cell2 = row.insertCell(1);
  cell2.innerHTML = data[i].name;
  var cell3 = row.insertCell(2);
  cell3.innerHTML = data[i].email;
}
table.appendChild(tbody);

var selectAll = document.createElement("input");
selectAll.type = "checkbox";
selectAll.name = "selectAll";
selectAll.onclick = function() {
  var checkboxes = document.getElementsByName("select");
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = this.checked;
  }
};
header.rows[0].cells[0].appendChild(selectAll);

document.body.appendChild(table);

这样就可以创建一个动态添加表格并添加全选框的功能了。