使用JavaScript和JSON自动使用数据填充表格 [英] Automatic fill a table with data using JavaScript and JSON

问题描述

我想在一张桌子上测试一下我的领域。我有一个表使用按钮进行输入，我想使用JSON传递所有变量。这是我所拥有的样本。我谷歌搜索，但没有得到我想要的。

 < table style =border-style：solid; display ：inline-block;> 
< tr> 
< td>个人名字< / td>< td>< input type =textid =searchPersonFName/>< / td> 
< / tr> 
< tr> 
< td>个人姓氏< / td>< td>< input type =textid =searchPersonLName/>< / td> 
< / tr> 
< tr> 
< td>人电话号码< / td>< td>< input type =textid =searchPersonNumber/>< / td> 
< / tr> 
< tr> 
< td>人公司名称< / td>< td>< input type =textid =searchPersonCompName/>< / td> 
< / tr> 
< tr> 
< td>人传真< / td>< td>< input type =textid =searchPersonFax/>< / td> 
< / tr> 
< tr> 
< td>电子邮件地址< / td>< td>< input type =textid =searchPersonEmail/>< / td> 
< / tr> 
< tr> 
< td> Prov /状态< / td>< td>< input type =textid =searchPersonProvState/>< / td> 
< / tr> 
< tr> 
< td>邮政编码< / td>< td>< input type =textid =searchPersonPostalCode/>< / td> 
< / tr> 
< tr> 
< td>城市< / td>< td>< input type =textid =searchPersonCity/>< / td> 
< / tr> 
< tr> 
< td> Country< / td>< td>< input type =textid =searchPersonCountry/>< / td> 
< / tr> 
< / table> 
< input type =buttonid =btnSearchPersononclick =searchPerson（）; value =搜索人员/> 
  

我基本上希望这个按钮能够长时间推出，并填充所有填充的内容这个：

  var filterList = new Array（）; 
 
 var company1Filter = {
 PersonFName：''
 PersonLName：''，
 etc .. 
} 
 filterList.push（company1Filter ）; 
  

我很新，如果我缺少任何信息，请让我知道可以进一步解释。

解决方案

我认为这就是您要找的内容：

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

  var INTERVAL = 3000; //提交会触发每个xxxx毫秒
 
函数searchPerson（）{
 //不知道你想在这里发生什么，或者如果这已经在你的代码中定义了或者...... 
} 
 
 //用这个数据填充这个JSON对象
 var filterList = [{
 PersonFName：'Steve'，
 PersonLName：'Stevenson '，
 PersonNumber：'123'，
 PersonCompName：'a'，
 PersonFax：'456'，
 PersonEmail：'[e-mail]'，
 PersonProvState：'NY'，
 PersonPostalCode：'123'，
 PersonCity：'NYC'，
 PersonCountry：'USA'
}，{
 PersonFName：Greg ，
 PersonLName：Gregory
 // etc ... 
}]; 
 
 //使用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（）; //清除之前的输入
 fillForm（filterList [i]）; 
 searchPerson（）; //或$（＃btnSearchPerson ）.click（）; 
 console.log（Submitted。Count：+ i）; 
 i ++; 
}，INTERVAL）; 
  

更改 INTERVAL 提交的消息，以毫秒为单位。 （我把它设置为3秒）。

I want to test a my fields in a table over night. I have a table that takes input with a button, and I want to pass all the variables using JSON. Here is the sample of what I have. I Googled but wasn't getting what I was looking for.

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

I basically want this button to be pushed the for a long time, and fill up all those filled using this:

var filterList = new Array();

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

I'm pretty new to this, if I am missing any information, please let me know as I can explain further.

解决方案

I think this is what you're looking for:

Working Fiddle: 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: '[e-mail]',
    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);

Change the INTERVAL to however often you want the submission to fire, in milliseconds. (I set it to 3 seconds).

这篇关于使用JavaScript和JSON自动使用数据填充表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！