我正在尝试创建一个带有表的模态，该表具有select选项中指定的行数。这是我的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中的第一个字段之后添加所选的字段或行。我正在看这个code作为参考，但它还没有奏效。这是我用来创建它的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>
是否可能是因为我试图以模态创建它而存在问题。如果您有任何建议，请告诉我。我一直试图弄清楚这几个小时，我开始拔头发。非常感谢你。
答案 0 :(得分：1)
function createFields() {
var numFields = $("#RiskFields option:selected").val(); // parseInt(document.getElementById(('#RiskFields').value));
for (var i = 1; i < numFields; i++) {
if (numFields == 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);
}
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<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>
<a type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal"
onclick="createFields()" id="createFields">Create Fields</a>
<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>
在你的代码中，onclick函数和data-target都是不可能的。 将其更改为“锚标记”。它的作品很好。和你的jquery中的一些错误。在这 “（”#fieldTables tbody“）。append（row）”$ not not given。低于确切的代码和html 删除document.ready
function createFields() {
var numFields = $("#RiskFields option:selected").val(); // parseInt(document.getElementById(('#RiskFields').value));
for (var i = 1; i < numFields; i++) {
if (numFields == 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>