我正在尝试创建一个模式，其中包含一个表，该表具有来自选择选项的指定数量的行。这是我拥有的html代码。
<div class ="form-group">
<label for="RiskFields">How many fields will be needed for the Risk Assesment? <br> </label>
<select id="RiskFields">
<option value = "5">5</option>
<option value = "6">6</option>
<option value = "7">7</option>
<option value = "8">8</option>
<option value = "9">9</option>
<option value = "10">10</option>
</select>
<p></p>
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" id = "createFields">Create Fields</button>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Fields</h4>
</div>
<div class="modal-body">
<table class = "table-bordered" width = "500" id = "fieldTables" >
<p> Input the Fields </p>
<p> The total score is out of 5 </p>
<thead>
<tr>
<td width ="5%" data-field = "numField"> Field # </td>
<td width ="20%" class = "test-center" dataField = "scoreBegin">Score</td>
<td width="15%" class="text-center" data-field = "scoreEnd">Score</td>
<td width="60%" class="text-center" data-field = "options" >options
</td>
</tr>
</thead>
<tbody>
<tr>
<td width ="5%" id = "numFirstField"> 1 </td>
<td width ="20%" class = "text-center" id = "scoreNumBegin" >Score's from <br> 0</td>
<td width="15%" class="text-center" id = "scoreNumEnd">To <input type = "text" class = "form-control" name = "firstScoreEnd"> </td>
<td width="60%" class="text-center" id = "options" >
<label for = "optionList">Choose from the following</label>
<select class="form-control" multiple = "multiple" name = "options0" id = "optionList0">
<option>Do Nothing</option>
<option>Send to Watchlist</option>
<option> do Something </option>
</select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td width ="5%" data-field = "numFieldLast"> </td>
<td width ="20%" class = "text-center" datafield = "scoreBegin" >Score's from <input type = "text" class = "form-control" data-field = "score1"></td>
<td width="15%" class="text-center" data-field = "scoreEnd">To <br> 5 </td>
<td width="60%" class="text-center" data-field = "options" >
<label for = "optionList">Choose from the following</label>
<select class="form-control" id="optionList5" multiple = "multiple">
<option>Do Nothing</option>
<option>Send to Watchlist</option>
<option> do Something </option>
</select>
</td>
</tr>
</tfoot>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
我希望应用程序做的是我希望它根据选择的数量创建表 - 2 行，因为已经创建了第一行和最后一行。所以我希望将选定的字段或行添加到 tbody 中的第一个字段之后。我正在查看此代码作为参考，但它还没有工作。这是我用来创建它的javascript。
<script>
$(document).ready(function(){
var numFields = parseInt(document.getElementById(('#RiskFields').value);
$("#createFields").click(function(){
$for(var i = 1; i < numFields ; i++){
if (i == 1 ){
break;
}
else{
var row = ("<tr><td>"+ (i+1) +"</td><td><input name='scoreBeg"+i+"' type='text' class='form-control input-md'> </td><td><input name='scoreEnd"+i+"' type='text' class='form-control input-md'></td><td><label for ='options" + i + "'>Selectfrom the following</label><select class = 'form-control' multiple = 'multiple' name = 'options "+i + "' id = 'optionList" + i +"'><option>Do Nothing</option> <option>Send to Watchlist</option><option>dosomething</option></select></td>");
("#fieldTables > tbody").append(row);
}
}
});
});
</script>
是不是因为我试图以模态创建它，所以它有问题。如果您有任何建议，请告诉我。我已经尝试解决这个问题几个小时了，我开始拔头发。非常感谢。