在HTML中创建类似Microsoft Office Word的表格生成器的控件

<div id="table-generator"></div>

// 获取表格生成器的容器
var container = document.getElementById("table-generator");

// 创建表格生成器的表单元素
var form = document.createElement("form");

// 创建表格行数的输入框
var numRowsInput = document.createElement("input");
numRowsInput.type = "number";
numRowsInput.placeholder = "行数";
form.appendChild(numRowsInput);

// 创建表格列数的输入框
var numColsInput = document.createElement("input");
numColsInput.type = "number";
numColsInput.placeholder = "列数";
form.appendChild(numColsInput);

// 创建生成表格的按钮
var generateButton = document.createElement("button");
generateButton.textContent = "生成表格";
generateButton.addEventListener("click", generateTable);
form.appendChild(generateButton);

// 将表单元素添加到容器中
container.appendChild(form);

// 生成表格的函数
function generateTable() {
  // 获取用户输入的行数和列数
  var numRows = parseInt(numRowsInput.value);
  var numCols = parseInt(numColsInput.value);

  // 创建表格元素
  var table = document.createElement("table");

  // 创建表格的行和列
  for (var i = 0; i < numRows; i++) {
    var row = document.createElement("tr");
    for (var j = 0; j < numCols; j++) {
      var cell = document.createElement("td");
      row.appendChild(cell);
    }
    table.appendChild(row);
  }

  // 将表格添加到容器中
  container.appendChild(table);
}

#table-generator {
  padding: 20px;
  background-color: #f0f0f0;
}

form {
  margin-bottom: 10px;
}

input[type="number"] {
  width: 50px;
}

button {
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

td {
  border: 1px solid #ccc;
  padding: 5px;
}