dropdown menu with specific cell functions

Question

I've a table with 5 columns:

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

In this example, I need to insert in the drop down menu some actions. eg: if the aircraft is airborne I need the ARRIVAL TIME CELL to became green, if is landed grey. I would like to create this function for each row and then I would like to save it to phpmyadmin DB.

`option` elements cannot receive events - it is the `select` element ( ie: the parent ) that receives events. The Select element also ought to have a name - but if you are not sending it's value to a form then probably not 100% necessary — Professor Abronsius, Jun 28 '17 at 16:02
Possible duplicate of [How to change select box option background color?](https://stackoverflow.com/questions/12836227/how-to-change-select-box-option-background-color) or [Change — ctwheels, Jun 28 '17 at 16:07

Professor Abronsius · Accepted Answer · 2017-06-28T16:48:01.397

As mentioned in the comment - the option element itself does not trigger or receive events - they are passed up to the parent element so it is on the select tag that you would assign an event listener.

If you pass an event and a value to the event handler you can quite easily set the desired colour on the particular cell by referring up the tree to the parent and down to the particular cell ( ie: parentNode.parentNode as see below )

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

The modification I mentioned should you wish to set the entire row colour according to the selected value you would change the relevant lines above to:

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

woooow RamRaider this work great!!! Thank you very much for your help !!! — scunja, Jun 28 '17 at 16:39
glad it helped. If you think this has solved the problem you should accept the answer so that others can see it has an answer - but that is up to you at the end of the day. With a little tweak you could set the entire row to the specified olour if that would be better?! — Professor Abronsius, Jun 28 '17 at 16:43
it works for the entire row as per your update. If I want to change the background color of the time cell how can I specify this? Sorry to boder you again — scunja, Jun 28 '17 at 16:54
use a similar syntax to that originally posted but use a different index ( ie: `tr.childNodes[INDEX]` ~ it seems counter-intuitive perhaps but generally ( don't quote me ) the first node ( 0 ) will be a text node and then following will be an element node ( 1 ) ~ so the element nodes are on ODD indices - 1,3,5,7... etc so for the `arrival time` try 5 and `departure time` try 7. You could try testing for `nodeType` prior to attempting the change ( `if( tr.childNodes[ INDEX ].nodeType==1 ){/* OK*/}` ) etc — Professor Abronsius, Jun 28 '17 at 18:09

dropdown menu with specific cell functions

1 Answers1