在数组中保存输入并显示所有项目jquery\javascript

我是jQuery的初学者。我希望表单的所有输入值都保存在数组=（项目01、项目02和）中

它应该在表中显示项目吗

我所做的，但它不起作用：

<form id="form_id">
    <label for="firstname">First Name:</label>
    <input type="text" id="firstname" name="name" value="" placeholder="Max" required="required" autofocus="autofocus" />
    <label for="lastname">Last Name:</label>
    <input type="text" id="lastname" name="name" value="" placeholder="Max" required="required" autofocus="autofocus" />
    <input type="submit" value="submit" id="submit-button" />
</form>

<div id="table">
<h2>List of all person</h2>
<table class="footable">
    <thead>
        <tr>
            <th data-class="expand"> First Name </th>
            <th> Last Name </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>e.g --> array[1].firstname</td>
            <td>e.g --> array[1].lastname</td>
        </tr>
    </tbody>
</table>
</div>

试试这个

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script type="text/javascript">
  $(document).ready(function(){
    $("#submit-button").click(function(){
      var data = $('#form_id').serializeArray();
      var obj = {};
      for (var i = 0, l = data.length; i < l; i++) {
          obj[data[i].name] = data[i].value;
      }
      $('table.footable tbody').append('<tr><td>'+obj['firstname']+'</td><td>'+obj['lastname']+'</td></tr>');
      $("#firstname").val('');
      $("#lastname").val('');
    })
  })
 </script>
<form id="form_id">
    <label for="firstname">First Name:</label>
    <input type="text" id="firstname" name="firstname" value="" placeholder="Max" required="required" autofocus="autofocus" />
    <label for="lastname">Last Name:</label>
    <input type="text" id="lastname" name="lastname" value="" placeholder="Max" required="required" autofocus="autofocus" />
    <input type="button" value="submit" id="submit-button" />
</form>

<div id="table">
<h2>List of all person</h2>
<table class="footable">
    <thead>
        <tr>
            <th data-class="expand"> First Name </th>
            <th> Last Name </th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
</div>

$（文档）.ready（函数（）{
$（“#提交按钮”）。单击（函数（）{
var data=$（'#form_id'）.serializeArray（）；
var obj={}；
对于（变量i=0，l=data.length；i

这应该行得通

<form id="form_id">
    <label for="firstname">First Name:</label>
    <input type="text" id="firstname" name="name" value="" placeholder="Max" required="required" autofocus="autofocus" />
    <label for="lastname">Last Name:</label>
    <input type="text" id="lastname" name="name" value="" placeholder="Max" required="required" autofocus="autofocus" />
    <input type="button" value="submit" id="submit-button" />
</form>
<div id="table">

<h2>List of all person</h2>

    <table class="footable">
        <thead>
            <tr>
                <th data-class="expand">First Name</th>
                <th>Last Name</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

var names = [],
    tbody = $("#table tbody");

function getInfo(e) {
    var nameObj = {
        first: e.target.form[0].value,
        last: e.target.form[1].value
    };

    names.push(nameObj);

    e.target.form[0].value = "";
    e.target.form[1].value = "";
    tbody.empty();

    names.forEach(function (name) {
        var tr = $("<tr>");

        tr.append($("<td>").text(name.first));
        tr.append($("<td>").text(name.last));

        tbody.append(tr);
    });
}

$("#submit-button").on("click", getInfo);

名字：
姓氏：
所有人员名单
名字
姓
变量名称=[]，
t正文=$（“#表格正文”）；
函数getInfo（e）{
变量nameObj={
第一个：e.target.form[0]。值，
最后：e.target.form[1]。value
};
names.push（nameObj）；
e、 target.form[0]。value=“”；
e、 target.form[1]。value=“”；
tbody.empty（）；
name.forEach（函数（名称）{
var tr=$（“”）；
tr.append（$（“”）.text（name.first））；
tr.append（$（“”）.text（name.last））；
tbody.append（tr）；
});
}
$（#提交按钮”）。在（“单击”，获取信息）；

---

在

上，该表单上没有任何输入，您可以向我们显示实际的HTML（或者它的一部分，如果它很大的话）？对不起，我已经更新了它。它有什么不起作用？顺便说一句，为什么不在

.each（）

中构建HTML？

<form id="form_id">
    <label for="firstname">First Name:</label>
    <input type="text" id="firstname" name="name" value="" placeholder="Max" required="required" autofocus="autofocus" />
    <label for="lastname">Last Name:</label>
    <input type="text" id="lastname" name="name" value="" placeholder="Max" required="required" autofocus="autofocus" />
    <input type="button" value="submit" id="submit-button" />
</form>
<div id="table">

<h2>List of all person</h2>

    <table class="footable">
        <thead>
            <tr>
                <th data-class="expand">First Name</th>
                <th>Last Name</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>

var names = [],
    tbody = $("#table tbody");

function getInfo(e) {
    var nameObj = {
        first: e.target.form[0].value,
        last: e.target.form[1].value
    };

    names.push(nameObj);

    e.target.form[0].value = "";
    e.target.form[1].value = "";
    tbody.empty();

    names.forEach(function (name) {
        var tr = $("<tr>");

        tr.append($("<td>").text(name.first));
        tr.append($("<td>").text(name.last));

        tbody.append(tr);
    });
}

$("#submit-button").on("click", getInfo);