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

我无法使用javascript从包含多行和多列的表中读取用户选择。输出不显示用户选择，而仅显示索引递增时的选项值。请任何人帮忙。谢谢

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

HTML代码：

获取价值

如果您只想显示用户选择的选择列表的值，请在此编写代码

如果您有多个行，每个行上都有相同的选择列表，那么最好不要为每个行分配ID，而是提供名称。ID对于每个html元素都应该是唯一的，但是您可以有类似的名称。因此，给它们取适当的名称，然后在执行操作时遍历每一行。现在，由于您需要纯javascript，请参阅下面的文章，并了解如何在javascript中通过各自的名称查找子元素

---

为什么要存储选项值而不是所选值？我想存储用户选择，但似乎只获取选项值。您能解释什么是用户选择吗？我提供的代码肯定会存储用户选择的值。这是用户选择，对吗？请帮助可视化您需要存储的内容。它会是什么样子？嗨，KD，我试着上传一张图片，但需要10个声誉才能做到…不知道这意味着什么！！sel.selectedValue是否会提供用户同时为多行选择的单元格数据？当前sel1.selectedValue给出未定义的错误响应。此外，sel1.selectedIndex根据selectedIndex值给出预定义选项值的问题，即会话或会话2等，哪个是0或1。是否有多个表行具有相同的选择列表？如果是这样的话，你就不能给他们分配相似的ID。每个html元素的id应该不同。尝试提供唯一的ID，然后在for循环计数器的帮助下尝试访问它们。这肯定会有帮助

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

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

}

sel1.options[sel1.selectedIndex].text