Daten vom Bootstrap-Modell übergeben

Question

Ich versuche, die Daten aus dem Bootstrap-Modell zu übergeben und in einer Tabelle anzuzeigen. Das Problem hierbei ist jedoch, dass ich die Daten nicht übergeben kann und die Spalte nur Nullwerte anzeigt. Ich bin ein Neuling, also brauche ich etwas Hilfe, wie man den Daten Tag und Sitzung übergibt?

<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> 

Answer 1

1. Sie haben nicht den Tag richtig für den "#addrow" Knopf geschlossen.

2. Sie können die Werte aus dem modalen wie so extrahieren (nachdem Sie die <select> Elemente eine korrekte ID geben:

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

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

3. Sie können dann die extrahierten Werte zum Pass Tabelle wie folgt:

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

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