使用JavaScript和JSON自动用数据填充表格

我想在一张桌子上测试我的田地。我有一个表，它通过一个按钮接收输入，我想使用JSON传递所有变量。这是我的样品。我在谷歌上搜索了一下，但没有得到我想要的东西

<table style="border-style:solid;display: inline-block; " >
    <tr>
        <td>Person First Name</td><td><input type="text" id="searchPersonFName"/></td>
    </tr>
    <tr>
        <td>Person Last Name</td><td><input type="text" id="searchPersonLName"/></td>
    </tr>
    <tr>
        <td>Person Telephone Number</td><td><input type="text" id="searchPersonNumber"/></td>
    </tr>
    <tr>
        <td>Person Company Name</td><td><input type="text" id="searchPersonCompName"/></td>
    </tr>
    <tr>
        <td>Person Fax</td><td><input type="text" id="searchPersonFax"/></td>
    </tr>
    <tr>
        <td>Email Address</td><td><input type="text" id="searchPersonEmail"/></td>
    </tr>
    <tr>
        <td>Prov/State</td><td><input type="text" id="searchPersonProvState"/></td>
    </tr>
    <tr>
        <td>Postal Code</td><td><input type="text" id="searchPersonPostalCode"/></td>
    </tr>
    <tr>
        <td>City</td><td><input type="text" id="searchPersonCity"/></td>
    </tr>
    <tr>
        <td>Country</td><td><input type="text" id="searchPersonCountry"/></td>
    </tr>
</table>
<input type="button" id="btnSearchPerson" onclick="searchPerson();" value="Search Person" />

我对这个很陌生，如果我缺少任何信息，请让我知道，因为我可以进一步解释。

通过ajax调用：

Javascript

 function makeTable(data) {
                var wrapColumn = function(value) {
                    return "<td>" + value + "</td>";
                };

                $("#table tbody").append("<tr><th>header1</th><th>header2</th><th>header3</th></tr>");

                for ( var i = 0; i < data.length; i += 1) {
                    $("#table tbody").append("<tr>" + wrapColumn(data[i].prop1)+ wrapColumn(data[i].prop2)+ wrapColumn(data[i].prop3)+ "</tr>")
                }
}

---

javascript函数将获取JSON对象，并将每个属性逐行放入一个表中（首先填写标题）。当用户单击按钮并执行makeTable函数时，on按钮单击将捕获。html实际上需要在页面上有一个表和按钮。在那里的某个地方，您需要一个JSON对象

我假设您想用有效JSON中的值填充此表，问题是您为我们提供了一个空JSON对象，因此我不得不猜测并临时修改，以展示其工作原理

您在提供的代码中根本没有定义searchPerson函数，请允许我为您完成以下工作：p

function searchPerson() {
    jQuery('#searchPersonFName'   ).val(company1Filter.FName   );
    jQuery('#searchPersonLName'   ).val(company1Filter.LName   );
    jQuery('#searchPersonNumber'  ).val(company1Filter.Number  );
    jQuery('#searchPersonCompName').val(company1Filter.CompName);
    jQuery('#searchPersonFax'     ).val(company1Filter.Fax     );
    //ETC...
}

---

应该提供一些您将如何做到这一点的见解。

我认为这就是您要寻找的：

工作小提琴：

---

将

间隔更改为您希望触发提交的频率，以毫秒为单位。（我将其设置为3秒）。
JSON从何而来？你是通过AJAX加载还是硬编码到页面中？我可能已经理解了。您是否希望用户填写表单，然后将这些信息作为JSON发送到某处？或者你想加载JSON数据并用它填充一个表？@JamesDuffy我想在晚上自动填充所有这些输入，没有用户坐在那里，我只想用JSON向他们传递一些随机变量。这更清楚吗？然后javascript自动按下那个按钮来提交我用JSONY提供的假数据你想自动重复表单提交吗？您是将数据提交到脚本所在的同一域还是其他服务器？@JamesDuffy是的，使用我在jsonhi jordan中的随机输入在同一服务器上重复提交。谢谢您的回答，您能告诉我这到底是做什么的吗？我对这些东西很陌生。我想在晚上自动填充所有这些输入，没有用户坐在那里，我只想使用Json向他们传递一些随机变量。这更清楚吗？然后javascript自动按下该按钮，提交我使用JSON提供的假数据。javascript函数将获取JSON对象，并将每个属性逐行放入表中（首先填写标题）。当用户单击按钮并执行makeTable函数时，on按钮单击将捕获。html实际上需要在页面上有一个表和按钮。在那里的某个地方，你需要一个JSON对象，这正是我想要的，但我如何使它成为javascript每隔几秒钟选择一次提交按钮，并在24小时内提交所有这些信息，同时我将监控服务器的响应时间，我将有10个不同的Company1过滤器，其中包含不同的数据输入那里，所以我想我需要一个按小时计费的for loopI buddy:D-但是您需要创建提交函数，将其封装在set_interval（）ala中，并使用您选择的语言进行服务器端处理。一些方便的参考资料包括，和。。。告诉我你想用这个小脚本解决什么问题？我看到您想要自动填充表，我看到您想要自动提交表，但我并不真正理解这解决了什么问题。如果我知道我可能能够提供更多/更好的建议，我非常想测试服务器对我所做的每一次搜索的响应时间（毫秒）。当数据量很大时，时间也会发生变化。这样做，我可以运行24小时的样本数据，看看这个搜索引擎有多轻。我在Apex中使用Salesforce进行此操作这正是我所寻找的，是否有可能在每次完成时都进行循环，以使过滤器列表重新开始？直到我停止它？你想让它一次又一次地提交相同的数据吗？是的，在这种情况下，只需将
setInterval
函数的前几行更改为：
if（i===filterList.length）{i=0；}
。非常感谢您，詹姆斯，这很完美，那么var fillForm=function（obj）{$each（obj，function（key，val）{$（“#search”+key.val（val）}）；作品它如何知道如何将每个字段与这些变量匹配
$。each（）
获取javascript对象中的每个键/值对，并对它们进行处理。在我们的例子中，通过在开始处添加“search”，键（如
PersonFName
）可以一致地映射到JQuery id选择器。即
PersonFName
=>
$（“#searchPersonFName”）
。
     <button type="button" class="btn btn-default" id="button"></button>
                    <div class="table-responsive">

                    <table id="table" class="table table-striped table-hover">

                        <tbody>

                        </tbody>

                    </table>

                </div>

        $("#button").click(function() {
                   var json = {};
        makeTable(json);
    })

function searchPerson() {
    jQuery('#searchPersonFName'   ).val(company1Filter.FName   );
    jQuery('#searchPersonLName'   ).val(company1Filter.LName   );
    jQuery('#searchPersonNumber'  ).val(company1Filter.Number  );
    jQuery('#searchPersonCompName').val(company1Filter.CompName);
    jQuery('#searchPersonFax'     ).val(company1Filter.Fax     );
    //ETC...
}

var INTERVAL = 3000; // submission will fire every xxxx milliseconds

function searchPerson() {
    // not sure what you want to happen here, or if this is already defined in your code or what... 
}

// fill this JSON object with all your data
var filterList = [{
    PersonFName: 'Steve',
    PersonLName: 'Stevenson',
    PersonNumber: '123',
    PersonCompName: 'a',
    PersonFax: '456',
    PersonEmail: 'a@a.com',
    PersonProvState: 'NY',
    PersonPostalCode: '123',
    PersonCity: 'NYC',
    PersonCountry: 'USA'
}, {
    PersonFName: "Greg",
    PersonLName: "Gregory"
    // etc...
}];

// fills the form inputs with the values from the JSON
var fillForm = function (obj) {
    $.each(obj, function (key, val) {
        $("#search" + key).val(val);
    });
};

var i = 0;
setInterval(function () {
    if (i === filterList.length) {
        console.log("Done.");
        return;
    }
    $("input").val(""); // clear previous input
    fillForm(filterList[i]);
    searchPerson(); // or $("#btnSearchPerson").click();
    console.log("Submitted. Count: " + i);
    i++;
}, INTERVAL);