如何列出输入字段中提交的所有人?

时间:2015-01-21 20:33:23

标签: javascript html css

目前在我的工作中,我们有一个系统,可以通过社交安全的最后5位搜索我们数据库中的人。但是,有许多人可能具有相同的数字组合,在这种情况下,系统会显示具有该组合的所有人。即:

Social     firstName     lastName     Age
55555     John           Doe          24
55555     Michael        Jordan       51
55555     Mike           Tyson        48

我对搜索功能不感兴趣,但我想知道如何以与我工作中的系统相同的方式显示数据库中的所有人(onclick)。我将使用javascript,因为它是我所知道的唯一语言。但是,我甚至可以用JS执行此任务吗?这是我到目前为止,它将是代码和简单英语的混合(描述我想做的事):

<body>
<h1>Please enter your information</h1>
<form>
 First name : <input type="text" id="fname"><br>
 Last name : <input type="text" id="lname"><br>
 Age : <input type="text" id="age"><br>
</form>
<button onclick="displayInfo()">Submit</button>

<div class="database">
  <table id="myPeeps">  <!-- Would tables be best for this? -->
  </table>
</div>

<script>
 var aName = document.getElementById('fname').value;
 var bName = document.getElementById('lname').value;
 var personAge = document.getElemntById('age').value;

 function person(one,two,three) {  //get the values from above and create a new object
  this.firstName = one;
  this.lastName = two;
  this.age = three;
 }

function displayInfo() {
create a new <tr> based on the number of people I have.
<td>PersonCreated.firstName here</td>
<td>PersonCreated.lastName here</td>
<td>PeronCreated.age here</td>

prepend newly created table row and table data to id ('myPeeps')
}
</script>
</body>

这可能要求很多,但请帮助新手。我一直试图这样做几个星期,我可能不会达到我需要执行此操作的javascript级别,但我们将非常感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

可以使用以下内容在表中插入新行:

var $row = $("<tr><td>" + firstName + "</td></tr>");
$("#myPeeps").append($row);

我刚刚添加了第一个表格单元格。这是一个更完整的示例jsfiddle

此外,您可以通过以下方式将值放入对象中:

var myobj = {"firstName": "John", "lastName": "Smith", "age": 22};

正如我所看到的,你已经从表单中获得了字段值,所以你只需将它们放入。