基本上我正在制作一个表格，其中插入具有点击功能的行。 插入行时，用户将选择一个值表单下拉菜单。并根据该值将新单元格插入到该特定行中。
我已经添加了全部功能。但是问题我每次从下拉菜单中选择它总是 alert 0。但不是实际值。
谁能告诉我我在这里做错了什么。
另一个错误是。在第一次尝试行选择时，rownum 持有未定义的值。
这是文档的全部代码。
var counter = 2;
var rownum;
var selectedvalue;
function myFunction() {
if (counter > 5) {
alert("Only 5 Rooms selection is allow ! ");
return false;
} else {
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var cell3 = row.insertCell(0);
var cell4 = row.insertCell(1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "<tr><td><label>Room # " + counter + ": </label></td>";
cell2.innerHTML = "<td><select ><option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option></select></td> ";
cell3.innerHTML = "<td><select id='child1' onchange='ofChild()' ><option value=0>0</option><option value=1>1</option><option value=2>2</option><option value=3>3</option></select></td>";
counter++;
}
}
function ofChild() {
var e = document.getElementById("child1");
selectedvalue = e.options[e.selectedIndex].value;
alert(selectedvalue);
$('#myTable').find('tr').click(function() {
rownum = $(this).index()
});
var firstRow = document.getElementById("myTable").rows[rownum];
alert('You clicked row ' + (rownum));
// in forloop selectedvalue will be in condition, 3 is just to check
for (i = 0; i < 3; i++) {
var x = firstRow.insertCell(-1);
x.innerHTML = "<td><select><option value=0>0</option><option value=1>1</option><option value=2>2</option><option value=3>3</option></select></td> </tr>";
}
}
function myDeleteFunction() {
if (counter < 2) {
return false;
} else {
document.getElementById("myTable").deleteRow(-1);
counter--;
}
}div {
padding: 8px;
}<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
</head>
<body>
<div id='TextBoxesGroup'>
<div align="center">
<table id="myTable" style="width:50%" class="table">
<tr class="success">
<td>
<label>Room</label>
</td>
<td>Adults (18+)</td>
<td>Child(0-17)</td>
<td>Child Age</td>
</tr>
<!--tr >
<td><label>Room # 1: </label></td>
<td><select ><option value=1>1</option><option value=2>2</option><option value=3>3</option><option value=4>4</option></select></td>
<td><select id="child" onchange="ofChild()"><option value=0>0</option><option value=1>1</option><option value=2>2</option><option value=3>3</option></select></td>
<td><select class="age"><option value=0>0</option><option value=1>1</option><option value=2>2</option><option value=3>3</option></select></td>
</tr-->
</table>
</br>
<input type='button' value='Add Room' onclick="myFunction()" id='addRoom' class="btn btn-success">
<input type='button' value='Remove Room' onclick="myDeleteFunction()" id='removeButton' class="btn btn-danger">
<br>
<br>
<input type='button' value='Search' class="btn btn-primary">
</div>
</body>
</html>这是到目前为止输出的图片
最佳答案
在myFunction中添加事件监听器
function myFunction(elem) {
...
$('#myTable').find('tr').off().on('click', function() {
rownum = $(this).index()
});
...
}
关于javascript - 在 javascript 中获取下拉值或文本时出错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35378917/