使用JavaScript从用户输入追加行

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

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

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

Answer 1

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

HTML：

 
 
 
Name
First name
 
 
 
    
​ 

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 = ''; for(i=0;i'; } } document.getElementById('targetTbl').innerHTML += newRow + ''; return false; }; 

为了实现这一点，您需要在HTML文件的底部包含此代码（不推荐），以确保在您尝试更改内容之前已加载DOM，或者您必须将此代码放入事件处理程序：

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

这是一个工作小提琴

Answer 2

几点要考虑：

• 您不希望提交按钮起作用。 这意味着您不希望它将您带到您在表单元素中指定的action 。 所以你要么添加一个onclick事件（ ）返回false，或者你 （ ）。

• 您需要定义按下按钮时应调用的函数：

例：

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

• 您需要创建一个


  标记，并根据您的数据向其添加行。 您可以使用jQuery，我建议您快速启动。 javascript中的DOM操作很痛苦。 你知道吗，忘了jQuery。 检查@Elias的答案，以获得更好，更清洁，更快速的方法。 而且，它会教你更多。 如果您使用图书馆，它可能是一个有价值的资产，如果没有图书馆，肯定会这样做。

示例（在jQuery中）：

 var table = $(""); for (var i=0; i"); var 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("" + firstname + "" + lastname + "" ); 

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

Answer 4

你有两个选择：

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

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

您选择哪种方式取决于后端与前端编码的舒适度。

Answer 5

您可以使用此function。 您需要将表的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-field1:  form-field2:   
 
 

你可以使用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脚本添加到标记中的代码中