目前,我正在创建一个接受名字和姓氏的表.在填写完一行之后,我想要出现一个新行(现在,我只是在制作一个按钮,这样我就可以正确地使用这个功能).

在这一行中,我想创建两个单元格,其中有文本输入,可用于其他名称.

Question:如何将文本输入插入到我的HTML表格行和单元格中?

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(2);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = "cell1";
    cell2.innerHTML = "cell2";
}
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;
}
<!DOCTYPE html>
<html lang="en">

<html>
    <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>

            <tr>
                <th><input type="text"></th>
                <th><input type="text"></th>
            </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>

推荐答案

如果您的意思是要在表的底部添加另一行输入,则可以将addRow函数编辑为如下所示:

function addRow() {
    const row = table.insertRow(-1);
    
    const cell1 = row.insertCell(0);
    const cell2 = row.insertCell(1);

    const input1 = document.createElement("input");
    input1.type = "text";
    cell1.appendChild(input1);

    var input2 = document.createElement("input");
    input2.type = "text";
    cell2.appendChild(input2);
}

请注意,为了在表的底部插入一行,我使用了insertRow(-1)


这是最终的结果:

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

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

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

function addRow() {
    const row = table.insertRow(-1);
    
    const cell1 = row.insertCell(0);
    const cell2 = row.insertCell(1);

    const input1 = document.createElement("input");
    input1.type = "text";
    cell1.appendChild(input1);

    var input2 = document.createElement("input");
    input2.type = "text";
    cell2.appendChild(input2);
}
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;
}
<!DOCTYPE html>
<html lang="en">

<html>
    <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>

            <tr>
                <th><input type="text"></th>
                <th><input type="text"></th>
            </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>

Javascript相关问答推荐

使用axios.获取实时服务器时的404响应

单击子元素时关闭父元素(JS)

按下同意按钮与 puppeteer 师

Chrome是否忽略WebAuthentication userVerification设置?""

当作为表达式调用时,如何解析方法decorator 的签名?

在open shadow—root中匹配时,使用jQuery删除一个封闭的div类

编剧如何获得一个div内的所有链接,然后判断每个链接是否都会得到200?

是什么导致了这种奇怪的水平间距错误(?)当通过JavaScript将列表项元素追加到无序列表时,是否在按钮之间?

如何在Svelte中从一个codec函数中调用error()?

为什么我的自定义元素没有被垃圾回收?

是否可以在Photoshop CC中zoom 路径项?

自定义确认组件未在vue.js的v菜单内打开

Phaserjs-创建带有层纹理的精灵层以自定义外观

为什么在函数中添加粒子的速率大于删除粒子的速率?

打字脚本中方括号符号属性访问和拾取实用程序的区别

不协调嵌入图片

JavaScript -复制到剪贴板在Windows计算机上无效

通过解构/功能组件接收props-prop验证中缺少错误"

如何在TransformControls模式下只保留箭头进行翻译?

在对象的嵌套数组中添加两个属性