[英]storing multiple cell option values from table into array using javascript
我无法使用javascript从具有多个行和列的表中读取用户选择。 输出不显示用户选择,而是仅显示选项值(随着索引的增加)。 任何人都可以帮忙。 谢谢!!
Java脚本
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代码:
获取价值
<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 />';
}
如果您拥有元素ID,则无需遍历表行。 如果您还希望存储所选元素的选项文本,则可以按照以下步骤进行操作。
sel1.options[sel1.selectedIndex].text
如果您有多行,每行上都有相同的选择列表,那么最好不要为每个行分配ID并提供名称。 ID对于每个html元素都应该是唯一的,但是您可以使用类似的名称。 因此,给它们起适当的名称,然后在进行操作时遍历每一行。 现在,当您需要纯JavaScript时,请参考以下文章,并了解如何在javascript中按其各自的名称查找子元素。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.