使用JavaScript将表中的多个单元格选项值存储到数组中

Question

I can't manage to read the users selection from a table with multiple rows and columns using javascript. The output does not show the user selection but instead only shows the option value as the index increments. Please can anyone help. Thanks!!

Javascript

function GetCellValues() {
    // Get table object
    var myTable = document.getElementById('my_table').tBodies[0];
    var sel1  = document.getElementById('session'); //drop down list in column 1 
    var sel2  = document.getElementById('event'); //drop down list in column 2
    var sel3  = document.getElementById('distance'); //drop down list in column 3
    var sel4  = document.getElementById('style'); //drop down list in column 4
    var s = new Array(); //initialize array to store all row values in column 1 
    var e = new Array(); //initialize array to store all row values in column 2
    var d = new Array(); //initialize array to store all row values in column 3
    var st = new Array(); //initialize array to store all row values in column 4
    var status = _("delstatus"); //to display message to user
         // first loop for each row 
        for (var r=0, n = myTable.rows.length; r < n; r++) {
             // this loop is getting each colomn/cells
            //for (var c = 0, m = myTable.rows[r].cells.length; c < m; c++) {
                // get student marks in each text boxes
               s[r] = sel1.options[r].innerHTML; //attempt to read in cell user selection and store
               e[r] = sel2.options[r].text;
               d[r] = sel3.options[r].text;
               st[r] = sel4.options[r].text;    
               //st[r] = sel4.options[sel4.selectedIndex].text; 
            //}
            //display the user selection
            status.innerHTML = status.innerHTML+ '||'+n+'||'+s[r]+'|'+e[r]+'|'+d[r]+'|'+st[r]+'<br />';
        }
}

The HTML code:

Get Values

        <table class="table_norm bg_grey" width="80%" align="center" id="my_table">
            <thead>
                <tr>
                    <th class="text_10 dotted_lebo">Session:</th>
                    <th class="text_10 dotted_lebo">Event:</th>
                    <th class="text_10 dotted_lebo">Distance:</th>
                    <th class="text_10 dotted_lebo">Style:</th>
                </tr>
            </thead>
            <tbody>
                <tr align="center">
                    <td class="text_10 dotted_lebo">
                        <select name="session" id="session" onfocus="emptyElement('status')" >
                            <option value=""></option>
                            <option value="1">Session1</option>
                            <option value="2">Session2</option>
                            <option value="3">Session3</option>
                            <option value="4">Session4</option>
                            <option value="5">Session5</option>
                            <option value="6">Session6</option>
                            <option value="7">Session7</option>
                            <option value="8">Session8</option>
                            <option value="9">Session9</option>
                            <option value="10">Session10</option>
                        </select>
                    </td>


                    <td class="text_10 dotted_lebo">
                        <select name="event" id="event" onfocus="emptyElement('status')">
                            <option value=""></option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                            <option value="6">6</option>
                            <option value="7">7</option>
                            <option value="8">8</option>
                            <option value="9">9</option>
                            <option value="10">10</option>
                        </select>
                    </td>


                    <td class="text_10 dotted_lebo">
                        <select name="distance" id="distance" onfocus="emptyElement('status')">
                            <option value=""></option>
                            <option value="25m">25m</option>
                            <option value="50m">50m</option>
                            <option value="100m">100m</option>
                            <option value="200m">200m</option>
                            <option value="400m">400m</option>
                            <option value="800m">800m</option>
                            <option value="1500m">1500m</option>
                            <option value="1km">1km</option>
                            <option value="3km">3km</option>
                            <option value="5km">5km</option>
                            <option value="10km">10km</option>
                            <option value="4x25m">4x25m</option>
                            <option value="4x50m">4x50m</option>
                            <option value="4x100m">4x100m</option>
                        </select>
                    </td>

                    <td class="text_10 dotted_lebo">
                        <select name="style" id="style" onfocus="emptyElement('status')">
                            <option value=""></option>
                            <option value="Freestyle">Freestyle</option>
                            <option value="Backstroke">Backstroke</option>
                            <option value="Breastroke">Breastroke</option>
                            <option value="Butterfly">Butterfly</option>
                            <option value="IM">IM</option>
                        </select>
                    </td>   
                </tr>
            </tbody>
        </table>

http://i.stack.imgur.com/NWDs5.png

Answer 1

Provided if you just want to show the values of select list which are selected by user here is the code you should write

function GetCellValues() {
    // Get table object
    var myTable = document.getElementById('my_table').tBodies[0];
    var sel1  = document.getElementById('session'); //drop down list in column 1 
    var sel2  = document.getElementById('event'); //drop down list in column 2
    var sel3  = document.getElementById('distance'); //drop down list in column 3
    var sel4  = document.getElementById('style'); //drop down list in column 4
    var status = _("delstatus");
    status.innerHTML = status.innerHTML+ '||'+sel1.selectedValue +'||'+sel2.selectedValue +'|'+sel3.selectedValue +'|'+sel4.selectedValue +'<br />';

}

There is no need to iterate through table rows if you have element ids with you. If you want to store also the option text of the selected element then you can do that like following.

sel1.options[sel1.selectedIndex].text

In case you have multiple rows which will have same select lists on each then better not to assign ids to each of them and provide name instead. Ids should be unique for each html element and you can have similar name though. Hence give them proper names and then iterate through each row as you are doing. Now as you need pure javascript refer following post and have a look how to find child elements by their respective name in javascript.

Javascript Get Child Element by Name