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

Question

我想在一夜之间在表格中测试我的字段。我有一个带有按钮输入的表，我想使用 JSON 传递所有变量。这是我所拥有的样本。我在 Google 上搜索过，但没有找到我想要的东西。

<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" />

我基本上希望这个按钮被按下很长时间，然后用这个填充所有填充的：

var filterList = new Array();

        var company1Filter = {
            PersonFName :  ''
            PersonLName : '',
            etc..
        }
        filterList.push(company1Filter);

我对此很陌生，如果我缺少任何信息，请告诉我，我可以进一步解释。

Answer 1

我想这就是你要找的东西：

工作小提琴： http://jsfiddle.net/HRyYs/

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

将INTERVAL 更改为您希望提交的触发频率，以毫秒为单位。 （我设置为 3 秒）。

Answer 2

通过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>")
                }
}

HTML

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

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

Answer 3

我假设你想用来自有效 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...
}

http://jsfiddle.net/2SMHz/5/ 应该提供一些关于如何执行此操作的见解。