javascript - 基于下拉选择的完整表格

Question

我有一个简单的表单，要求员工输入电话号码、员工 ID 等。我想通过允许他们从下拉列表中选择他们的姓名并让他们节省一些时间(并防止数据输入错误)根据所选名称自动填充电话和 ID 号的文本输入字段。

我有一个包含所有员工信息的 HTML 表格，但不知道如何将该信息传递到适当的字段。代码片段如下:

#emp_data_tbl {
  width: 90%
}

#emp_data_tbl td,
#emp_data_tbl th {
  border: 1px solid #ddd;
  padding: 8px;
}

#emp_data_tbl tr:nth-child(even) {
  background-color: #f2f2f2;
}

#emp_data_tbl tr:hover {
  background-color: #ddd;
}

#emp_data_tbl th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}

<p>Name</p>
<select required>
  <option value="" disabled selected hidden>Choose Name...
  </option>
  <option value="Adam Jackson">Adam Jackson
  </option>
  <option value="Bill Smith">Bill Smith
  </option>
  <option value="Chris Clinton">Chris Clinton
  </option>
  <option value="David Billings">David Billings
  </option>
  <option value="Eamon Lampsen">Eamon Lampsen
  </option>
</select>


<p>Phone</p>
<input type="text" id="phone">

<p>ID</p>
<input type="text" id="IdNum">


<br><br>
<hr><br><br>


<table id="emp_data_tbl">
  <caption>In reality, this data table is hidden with CSS display: none but viewable here in this mock up</caption>
  <col>
  <col>
  <col>

  <tr>
    <th>Name</th>
    <th>Phone</th>
    <th>ID</th>
  </tr>

  <tr>
    <td>Adam Jackson</td>
    <td>111-111-1111</td>
    <td>#1111</td>
  </tr>


  <tr>
    <td>Bill Smith</td>
    <td>222-222-2222</td>
    <td>#2222</td>
  </tr>


  <tr>
    <td>Chris Clinton</td>
    <td>333-333-3333</td>
    <td>#3333</td>
  </tr>

  <tr>
    <td>David Billings</td>
    <td>444-444-4444</td>
    <td>#4444</td>
  </tr>

  <tr>
    <td>Eamon Lampsen</td>
    <td>555-555-5555</td>
    <td>#5555</td>
  </tr>

</table>

Answer 1

这将帮助您入门。

#emp_data_tbl {
  width: 90%
}

#emp_data_tbl td,
#emp_data_tbl th {
  border: 1px solid #ddd;
  padding: 8px;
}

#emp_data_tbl tr:nth-child(even) {
  background-color: #f2f2f2;
}

#emp_data_tbl tr:hover {
  background-color: #ddd;
}

#emp_data_tbl th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}

 <form action="#">
  <label for="name">Name</label><br>
  <select id="name" name="name"></select><br><br>
  <!--<label for="female">Phone</label><br>
  <input type="text" name="phone" id="phone"><br><br>
  <label for="id">ID</label><br>
  <input type="text" name="id" id="id"><br><br>-->
  <input type="submit" value="Submit">
</form> 

<br><br>
<hr><br><br>


<table id="emp_data_tbl">
    <tr>
      <th>Name</th>
      <th>Phone</th>
      <th>ID</th>
    </tr>

    <tr>
      <td>Adam Jackson</td>
      <td>111-111-1111</td>
      <td>#1111</td>
    </tr>
    <tr>
      <td>Bill Smith</td>
      <td>222-222-2222</td>
      <td>#2222</td>
    </tr>

    <tr>
        <td>Chris Clinton</td>
        <td>333-333-3333</td>
        <td>#3333</td>
    </tr>
        <tr>
          <td>David Billings</td>
          <td>444-444-4444</td>
          <td>#4444</td>
    </tr>
    <tr>
      <td>Eamon Lampsen</td>
      <td>555-555-5555</td>
      <td>#5555</td>
    </tr>
</table>

<script>

var rows = document.getElementById("emp_data_tbl").rows;
var users = [];
var phonenrs = [];
var ids = [];

//start at i = 1 to skip the header row
for(var i = 1; i < rows.length; i++)
{
    users.push(rows[i].cells[0].innerHTML);
    phonenrs.push(rows[i].cells[1].innerHTML);
    ids.push(rows[i].cells[2].innerHTML);
}

var nameList = document.getElementById("name");

for(var i = 0; i < users.length; i++)
{
    nameList.add(new Option(users[i], users[i] + " - " + phonenrs[i] + " - " + ids[i]));
}

</script>

在此之后，您需要在用户选择他的名字时做一些事情。 您可以通过向选择框添加一个 onChange 来完成此操作，该选择框包含一个函数，该函数将在用户选择选择框的选项时执行。例如:

<select id="name" name="name" onchange="fillData();"></select>

在此之后，您可以创建一个 Javascript 函数 fillData()，它获取属于用户的电话号码和 ID，并使用 javascript 填充值。像这样的东西:

function fillData(){ 
document.getElementById("phone").value = ""; 
//get and set your id and phone values here 
}