I basically make a table into which rows with a click function are inserted. When the row is inserted, the user selects the drop-down menu of the form form. And according to this value, new cells will be inserted into this percussion row.
I added all the functionality. But the problem I get here every time I choose from the drop-down menu. Always alert0. But not the actual value. Can anyone tell me what I'm doing wrong here.
Another mistake. the first time you try to select a row, rownum holds the value undefined.
This is all document code.
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));
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>
</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>
Here is the output image so far
source
share