我正在尝试从bootstrap模型传递数据并将其显示在表上。但是,这里的问题是我无法传递数据,列只显示空值。我是新手,所以我需要一些关于如何传递数据日和会话的帮助?
<table class="table order-list" id="myTable">
<thead>
<tr>
<th>
Day
</th>
<th>
Type
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div id="daypicker" class="modal-body">
<div class="container">
<h5>Select A Day: </h5>
<select class="selectpicker" data-style="btn-info" multiple data-max-options="1" data-live-search="true">
<optgroup label="Day">
<option>Monday</option>
<option>Tuesday</option>
</optgroup>
</select>
<h5>Select A Session: </h5>
<select class="selectpicker" data-style="btn-info" multiple data-max-options="1" data-live-search="true">
<optgroup label="Session">
<option>Morning</option>
</optgroup>
</select>
</br>
</br>
</div>
</div>
</br>
</br>
</br>
<div class="modal-footer">
<button id="addrow" type="button" class="btn btn-primary">Add</a>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control" name="Day' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="Session' + counter + '"/></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
});
</script>
答案 0 :(得分:0)
您尚未正确关闭“#addrow”按钮的标签。
您可以像这样从模态中提取值(在为<select>
元素提供正确的ID之后:
var dayPickerSelect1 = $("#daypicker-select1").val();
var dayPickerSelect2 = $("#daypicker-select2").val();
然后,您可以将提取的值传递给表,如下所示:
<input type="text" class="form-control" name="Day' + counter + '" value="' + dayPickerSelect1 + '"/>
<input type="text" class="form-control" name="Session' + counter + '" value="' + dayPickerSelect2 + '"/>