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>';

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

1 个答案: