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

Question

我有一个包含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。

Answer 1

正如注释中提到的- 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>';