javascript - 使用 JavaScript 从用户输入追加行

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
};

这是一个工作小提琴

Answer 2

Few points to consider:

• You do not want your submit button to work. That means you do not want it to take you to the action you specified in the form element. So you either add an onclick event which (<input type="submit" onclick="dosomething();return false;" />) returns false, or you make it of type "button" (<input type="button" onclick="dosomething();" />).

• You need to define a function that should be called when the button is pressed:

Example:

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

• You need to create a <table> tag, and add rows to it based on your data. You could use jQuery for that, and I would recommend that to get you starting quickly. DOM manipulation in javascript is a pain. You know what, forget jQuery. Check @Elias's answer for a better, cleaner, faster approach. And also, it teaches you much more. It might be a valuable asset when/if you do use a library, and it certainly will, if you can do without one.

Example (in 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 是“名字”和“姓氏”。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

You can use this function. You need to send as a parameter the id of the table and change valueInputForm with the variables in which you have the values of the inputs

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 5

你有两个选择：

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

Ajax：您使用 AJAX 在后台提交表单，然后使用 JavaScript，将新行附加到 HTML 客户端。

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

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>