从引导模型

时间:2016-08-04 12:56:54

标签: javascript html twitter-bootstrap function

我正在尝试从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>

1 个答案:

答案 0 :(得分:0)

  1. 您尚未正确关闭“#addrow”按钮的标签。

  2. 您可以像这样从模态中提取值(在为<select>元素提供正确的ID之后:

    var dayPickerSelect1 = $("#daypicker-select1").val();

    var dayPickerSelect2 = $("#daypicker-select2").val();

  3. 然后,您可以将提取的值传递给表,如下所示:

    <input type="text" class="form-control" name="Day' + counter + '" value="' + dayPickerSelect1 + '"/>

    <input type="text" class="form-control" name="Session' + counter + '" value="' + dayPickerSelect2 + '"/>