如何在HTML表格中添加包含文本输入框的行？

要在新增的表格行单元格中插入文本输入框，只需修改addRow函数，将单元格的innerHTML设置为输入框的HTML代码即可。另外注意原表格中数据行误用了<th>标签（该标签为表头专用），建议替换为<td>以符合HTML语义规范。

修改后的JavaScript代码 #

const table = document.querySelector('#table');

function lineMessage(msg) {
    document.querySelector('#myMessage').textContent += msg;
}

function groupMessage(msg) {
    document.querySelector('#myMessage').innerHTML += msg + '<br/>';
}

function addRow() {
    // 不指定索引，默认将行插入表格末尾，更灵活
    var row = table.insertRow();
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    // 插入与现有行样式一致的输入框
    cell1.innerHTML = '<input type="text">';
    cell2.innerHTML = '<input type="text">';
}

优化后的HTML代码（修正语义标签） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Christian Davis">
    <link rel="stylesheet" href="styles.css">
    <title>Random Group Generator</title>
</head>
<body>
    <table id="table" border="1">
        <tr>
            <th>First Name:</th>
            <th>Last Name:</th>
        </tr>
        <!-- 数据行使用td标签替代th -->
        <tr>
            <td><input type="text"></td>
            <td><input type="text"></td>
        </tr>
    </table> <br>

    <button onclick="addRow()">Add Row</button>
    <button id="submit">Submit</button>
    <p id="myConsole">&gt;&nbsp;<span id="myMessage"></span></p>
    <script src="app.js"></script>
</body>
</html>

CSS代码（保持原有样式） #

th {
    width: 50vmin;
    height: 10vmin;
    font-size: 20pt;
}

td {
    width: 50vmin;
    height: 5vmin;
}

input {
    width: 100%;
    height: 100%;
    text-align: center;
    align-items: center;
    font-size: 18pt;
    font-weight: 500;
    font-family: Georgia, 'Times New Roman', Times, serif;
    width: 100%;
    border: 0;
}

#submit {
    background-color: blue;
    color: white;
    border: 0;
    position: relative;
    left: 82vmin;
}

#myConsole {
    background-color: black;
    color: white;
    height: 25vmin;
}

关键说明 #

• 使用table.insertRow()不指定索引，默认将新行添加到表格末尾，避免固定索引导致后续新增行位置错误。
• 单元格内直接插入<input type="text">，可自动继承CSS定义的样式，与现有输入框保持视觉统一。
• 修正语义标签后，页面结构更规范，也利于后续样式维护和浏览器渲染优化。

内容的提问来源于stack exchange，提问作者That New Coder