如何使用innerHTML实现新增表格行与第一行格式一致？

先修正基础问题，再实现新增行与首行结构完全一致的需求：

关键优化点 #

• 原HTML把数据行放在<thead>不符合规范，需将表头行留在<thead>，数据行移至<tbody>
• 按钮点击事件调用的MycreateRow与定义的函数名createRow不匹配，需统一
• 新增行要复用首行的带占位符输入框和选择框结构，同时避免重复id（原选择框的id="optionSell"不能复用，id必须唯一）

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<style>
    table, th, td {
        border: 1px solid black;
    }
</style>

<head> 
</head>

<body>
<table id="table">
    <thead>
        <tr>
            <th>Product</th>
            <th>Amount</th>
            <th>Buy or Sell?</th>
        </tr>
    </thead>
    <tbody>
        <!-- 首行数据移到tbody区域 -->
        <tr>
            <td><input type="text" name="name" placeholder="Enter the Product Name Here"></td>
            <td><input type="text" name="Amount" placeholder="Enter the Amount you want to buy or sell Here"></td>
            <td>
                <select>
                    <option value="placeholding">Buy or Sell</option>
                    <option value="buy">Buy</option>
                    <option value="sell">Sell</option>
                </select>
            </td>
        </tr>
    </tbody>
</table>
<div class="container">
    <div id="click">
        <button onclick="createRow()">Add Row</button>
    </div>
</div>

<script>
function createRow() {
    let tableBody = document.getElementById("table").querySelector('tbody');
    let row = tableBody.insertRow(-1);
    
    let productCell = row.insertCell(0);
    let amountCell = row.insertCell(1);
    let buyCell = row.insertCell(2);
    
    // 直接复用首行的表单元素结构
    productCell.innerHTML = '<input type="text" name="name" placeholder="Enter the Product Name Here">';
    amountCell.innerHTML = '<input type="text" name="Amount" placeholder="Enter the Amount you want to buy or sell Here">';
    buyCell.innerHTML = `
        <select>
            <option value="placeholding">Buy or Sell</option>
            <option value="buy">Buy</option>
            <option value="sell">Sell</option>
        </select>
    `;
}
</script>
</body>
</html>

核心说明 #

1. 数据行放入<tbody>是HTML表格的标准结构，新增行也插入到<tbody>中，保证结构清晰规范
2. 统一函数名后，按钮点击可正确触发新增逻辑
3. 每个单元格的innerHTML直接使用与首行完全一致的代码，确保占位符、选择项完全匹配，同时移除重复id避免DOM冲突

内容的提问来源于stack exchange，提问作者Arfo Furoshita