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

Automatic fill a table with data using JavaScript and JSON

本文关键字：填充 数据表 JSON JavaScript 使用      更新时间：2023-09-26

我想在一个表中测试我的字段。我有一个带按钮输入的表，我想使用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" />

我想让这个按钮被长时间按下，并填充所有使用这个填充:

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

我是新手，如果我遗漏了什么信息，请告诉我，我可以进一步解释

我想这就是你要找的:

工作小提琴: 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秒)

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


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

On button click:

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

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

http://jsfiddle.net/2SMHz/5/应该提供一些如何做到这一点的见解。

相关文章：