使用JavaScript在用户输入中追加行 [英] Append row from user input with JavaScript

问题描述

我是一个非常初级的初学者，他正在尝试使用JavaScript进行操作.

I am a very early beginner who is trying to do something in JavaScript.

基本上，我有一个HTML表单，用于收集用户输入.我有一个提交按钮.提交时，我希望将输入中的值作为新行附加到表中.

Basically I have an HTML form where I am collecting user input. I have a submit button. When on submit, I want my values from the input to be appended to a table as a new row.

我花了数小时试图寻找方向，有人可以指出我正确的方向吗?

I have spent hours trying to find a direction, can someone point me in the right direction?

推荐答案

由于没有人愿意(或可以提供)纯JS答案，因此可以使用纯JavaScript来做到这一点.如果不清楚，请告诉我们，我们将很乐意为您提供有用的链接并解释此代码的作用:

Since nobody else wants to (or can) provide a pure JS answer, here's how you can do it with pure JavaScript. If some things are unclear, let me know and I'll be happy to provide you with useful links and explain what this code does:

HTML:

<table id='targetTbl'>
    <tbody>
        <tr><th>Name</th><th>First name</th></tr>
    </tbody>
</table>
<form id='inForm'>
    <input type='text' name='name' id='name'/>
    <input type='text' name='first' id='first'/>
    <input type='submit' value='add row'/>
</form>​

JavaScript:

JavaScript:

document.getElementById('inForm').onsubmit = function(e)
{
    var newRow,i;
    e = e || window.event;
    if (e.preventDefault)
    {
        e.preventDefault();
        e.stopPropagation();
    }
    e.returnValue = false;
    e.cancelBubble = true;
    newRow = '<tr>';
    for(i=0;i<this.elements.length;i++)
    {
        if (this.elements[i].tagName.toLowerCase() === 'input' && this.elements[i].type === 'text')
        {
            newRow += '<td>'+this.elements[i].value+'</td>';
        }
    }
    document.getElementById('targetTbl').innerHTML += newRow + '</tr>';
    return false;
};

为使此功能正常运行，您需要在HTML文件的底部(不推荐)添加此代码，以确保在尝试更改之前已加载DOM，或者必须放入此代码在事件处理程序中:

In order for this to work, you need to either include this code at the bottom of your HTML file (not reccomended) to ensure the DOM has loaded before you're trying to change things, or you'll have to put this code inside an event handler:

window.onload = function()
{
    //above code goes here
};

这是一个工作的小提琴

这篇关于使用JavaScript在用户输入中追加行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！