HTML 点击按钮添加表格行 - 带复选框和输入框

<!DOCTYPE html>
<html>
<head>
<title>添加表格行 - 带复选框和输入框</title>
<style>
table {
  border-collapse: collapse;
}
td {
  border: 1px solid black;
  padding: 5px;
}
</style>
</head>
<body>
<table id="myTable">
  <tr>
    <td><input type="checkbox"></td>
    <td><input type="text"></td>
  </tr>
</table>
<button onclick="addRow()">添加行</button>
<script>
function addRow() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(table.rows.length);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = '<input type="checkbox">';
  cell2.innerHTML = '<input type="text">';
}
</script>
</body>
</html>
<p>在上面的代码中，我们首先创建了一个包含一个复选框和一个输入框的表格。然后，我们添加了一个按钮，并为按钮添加了一个<code>onclick</code>事件，当点击按钮时，会调用名为<code>addRow()</code>的JavaScript函数。</p>
<p>在<code>addRow()</code>函数中，我们首先获取到表格元素，并使用<code>insertRow()</code>方法在表格的末尾插入一行。然后，我们使用<code>insertCell()</code>方法在新插入的行中插入两个单元格。最后，我们使用<code>innerHTML</code>属性为每个单元格添加了相应的HTML代码，即复选框和输入框。</p>
<p>当我们点击按钮时，<code>addRow()</code>函数会被调用，从而在表格中添加了一行，新行中包含一个复选框和一个输入框。</p>