使用另一个表格单元格的下拉列表填充其他HTML表格单元格

时间:2017-04-07 20:46:25

标签: html html-table cell

我必须为我的团队创建一个联系人列表,以便在我们的网站上实施,因为有大量的联系人,我希望只有一个带有下拉菜单的表格单元格,一旦点击,它将会使用基于选择的受尊重信息填充其旁边的其他单元格。

我对HTML很陌生,所以我甚至不确定如何使下拉列表工作。

<div class="table-responsive">
  <table class="table table-striped table-bordered table-hover" style="text-align:center;">
    <thead>
      <tr>
        <th>Department</th>
        <th>Division</th>
        <th>Number</th>
        <th>CTI</th>
        <th>Email</th>
      </tr>
    </thead>

    <tbody style="overflow-y:scroll; height:200px;">
      <tr>
        <td class="select">
          <select>
            <option value="department">Department</option>
            <option value="saab">Division</option>
            <option value="number">Number</option>
            <option value="cti">CTI</option>
            <option value="email">Email</option>
          </select>
        </td>
        <td class="select">
          <select>
            <option value="billing">billing</option>
            <option value="retention">retention</option>
            <option value="sales">sales</option>
            <option value="support">support</option>
            <option value="management">management</option>
          </select>
        </td>
        <td>
          Number
        </td>
        <td>
          CTI
        </td>
        <td>
          Email
        </td>
      </tr>

    </tbody>
  </table>
</div>

到目前为止,我在下面得到的答案并没有完全符合我的要求。

下面我添加了一张用CSS表示我的表格的图片,我希望前两个单元格填充部门及其部门。其他单元格将根据前两个选项填充自己:

Contacts Table Idea

1 个答案:

答案 0 :(得分:0)

试试这个

   <tr>
        <td>
        <select>        
                <option value="department-1">Department</option>
                <option value="department-2">Department</option>
                <option value="department-3">Department</option>
                <option value="department-4">Department</option>
                <option value="department-5">Department</option>
        </select>
        </td>   

        <td>
        <select>        
                <option value="division-1">Division</option>
                <option value="division-2">Division</option>
                <option value="division-3">Division</option>
                <option value="division-4">Division</option>
                <option value="division-5">Division</option>
        </select>
        </td> 
    </tr>

然后继续添加