Question

我是一个非常早期的初学者，正试图用JavaScript做点什么。

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

我花了好几个小时试图找到一个方向，有人能指出我正确的方向吗？

Answer 1

由于没有其他人愿意（或可以）提供纯粹的JS答案，因此您可以使用纯JavaScript来实现这一目标。如果有些事情不清楚，请告诉我，我很乐意为您提供有用的链接并解释此代码的作用：

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的：

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，或者您必须放置这段代码在事件处理程序中：

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

Here's a working fiddle

Answer 2

几点需要考虑：

您不希望提交按钮起作用。这意味着您不希望它将您带到表单元素中指定的action。因此，您要么添加一个onclick事件（<input type="submit" onclick="dosomething();return false;" />）返回false，要么将其设为“button”（<input type="button" onclick="dosomething();" />）类型。
您需要定义按下按钮时应调用的函数：

示例：

function dosomething() {
    alert("I did something");
    // do something useful
}

您需要创建一个<table>代码，并根据您的数据向其添加行。 ~~您可以使用jQuery，我建议您快速启动。 javascript中的DOM操作很痛苦。~~你知道吗，忘了jQuery。检查@Elias's answer以获得更好，更清洁，更快捷的方法。而且，它会教你更多。如果您使用图书馆，它可能是一个宝贵的资产，如果没有图书馆，它肯定会有。

<击> 示例（在jQuery中）：

var table = $("<table></table>"); for (var i=0; i<data.length; i++) { var tr = $("<tr></tr>"); var td = $("<td></td>"); $(td).text(data[i]); $(tr).append(td); $(table).append(tr); } $("body").append(table);

<击>

Answer 3

好的家伙，在阅读了一些内容并请朋友解释后，我能够用jQuery做到这一点。对不起，我没有在开头添加jQuery标签，因为我不知道。但是我在js的第一次练习中接触到了jQuery。所以我最终能够掌握这一点。所以这就是我所拥有的，它对我有用。如果这是对的，可能对像我这样的学习者有用。

输入字段的ID是“firstname”和“lastname”。 getElementById（）。value获取用户输入的值。

var firstname = document.getElementById("firstname").value;
var lastname = document.getElementById("lastname").value; 
$("#myTable tr:last").after("<tr><td>" + firstname + "</td><td>" + lastname + "</td></tr>" );

我通过按钮onclick（）调用此函数。感谢您的支持。

Answer 4

您有两种选择：

古典：您提交表单。服务器读取表单，并为添加了新行的表单的新副本生成HTML，并将其发送回浏览器。

Ajax ：您使用AJAX在后台提交表单，然后使用JavaScript，向HTML客户端添加一个新行。

您选择的内容取决于后端与前端编码的舒适程度。

Answer 5

您可以使用此功能。您需要将表的id作为参数发送，并使用您具有输入值的变量更改valueInputForm

function addRow(tableID) {      

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    cell1.innerHTML = valueInputForm;

    var cell2 = row.insertCell(1);
    cell2.innerHTML = valueInputForm;

    var cell3 = row.insertCell(2);
    cell2.innerHTML = valueInputForm;
}

Answer 6

让我们说你有这个HTML HTML：

<form id="target">
  form-field1: <input type="text" id="form-field1" value="Hello there" />
  form-field2: <input type="text" id="form-field2" value="How are you" />
  <input type="submit" value="Go" />
</form>
<div id='targettable'><table><thead></thead><tbody></tbody></table></div>

您可以使用jquery：

$("#target :input").each(function(){
 var input = $(this); // This is the jquery object of the input, do what you will
  $("#targettable >tbody:last').append($(this).val());
})

将jquery脚本添加到<head>标记

中的代码中

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

使用JavaScript从用户输入追加行

6 个答案: