javascript - 具有特定单元格功能的下拉菜单

我有一个5列的表格：

  <script>
  function function1() {
      document.all.myTD.bgColor = "green";
  }
  function function2() {
      document.all.myTD.bgColor = "grey";
  }
   </script>


            <tr>
                <th>aircrift type</th>
                <th >registration</th>
                <th >arrival time</th>
                <th>departure time</th>
                <th>actions</th>
            </tr>
                <tr>
                <td>aircrift type</td>
                <td >registration</td>
                <td id="myTD">arrival time</td>
                <td>departure time</td>
                <td><select> <option onclick="function1()">airborne</option><option onclick="function2()">airborne</option></select></th>
            </tr>

在此示例中，我需要在下拉菜单中插入一些操作。例如：如果飞机是空中飞机，我需要到达时间盒变成绿色，如果飞机降落为灰色。
我想为每一行创建此函数，然后将其保存到phpmyadmin DB。

最佳答案

如注释中所述-option元素本身不会触发或接收事件-它们会传递给父元素，因此要在select标记上分配事件侦听器。

如果将event和值传递给事件处理程序，则可以通过将树向上引用到父级并向下引用到特定单元格（例如，如下所示的parentNode.parentNode），很容易地在特定单元格上设置所需的颜色。

<table>
    <tr>
        <th>aircrift type</th>
        <th>registration</th>
        <th>arrival time</th>
        <th>departure time</th>
        <th>actions</th>
    </tr>
    <tr>
        <td>Boeing 747</td>
        <td>BA747-01KDS</td>
        <td>18:30</td>
        <td>16:30</td>
        <td>
            <select name='aircraft-state' onchange='setcolour(event,this.value)'>
                <option selected>Please Select
                <option value='airborne'>Airborne
                <option value='landed'>Landed
                <option value='boarding'>Boarding
                <option value='fuelling'>Fuelling
                <option value='changeover'>Changeover
            </select>
        </td>
    </tr>
    <tr>
        <td>Airbus A380</td>
        <td>KLM380-FD76</td>
        <td>19:45</td>
        <td>15:00</td>
        <td>
            <select name='aircraft-state' onchange='setcolour(event,this.value)'>
                <option selected>Please Select
                <option value='airborne'>Airborne
                <option value='landed'>Landed
                <option value='boarding'>Boarding
                <option value='fuelling'>Fuelling
                <option value='changeover'>Changeover
            </select>
        </td>
    </tr>
    <tr>
        <td>A10 Warthog</td>
        <td>WB-USAF-0034</td>
        <td>20:00</td>
        <td>19:20</td>
        <td>
            <select name='aircraft-state' onchange='setcolour(event,this.value)'>
                <option selected>Please Select
                <option value='airborne'>Airborne
                <option value='landed'>Landed
                <option value='boarding'>Boarding
                <option value='fuelling'>Fuelling
                <option value='changeover'>Changeover
            </select>
        </td>
    </tr>
</table>
<script>
    function setcolour(e,v){
        e.preventDefault();
        var tr = e.target.parentNode.parentNode;
        switch( v ){
            case 'airborne':
                tr.childNodes[3].style.backgroundColor='green';
            break;
            case 'landed':
                tr.childNodes[3].style.backgroundColor='gray';
            break;
            case 'boarding':
                tr.childNodes[3].style.backgroundColor='red';
            break;
            case 'fuelling':
                tr.childNodes[3].style.backgroundColor='yellow';
            break;
            case 'changeover':
                tr.childNodes[3].style.backgroundColor='purple';
            break;
        }
    }
</script>

如果您希望根据所选值设置整个行颜色，则可以将上面的相关行更改为：

tr.style.backgroundColor='<COLOUR>';

关于javascript - 具有特定单元格功能的下拉菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44807482/