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来实现此目的，该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 
}

基于下拉选择的完整表格

1 个答案: