Question

我想在一张桌子上测试我的田地过夜。我有一个带有按钮输入的表，我想使用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);

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

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/应该提供一些有关如何执行此操作的见解。

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

3 个答案: