我是新来的,请找一些帮助。我正在学习jQuery / Javascript,却遇到了一个我无法解决的问题。
我有一个表,并根据用户从下拉列表中选择的编号创建行。用户可以通过更改下拉列表中的数字来添加或删除行。所有这些都可以正常运行,但是我想在<tbody>
之后直接添加一个tr,用户不应删除该tr。所有新行都应出现在该初始行之后。
我正在使用它,因此用户可以在此初始tr之后添加新行,但是如果他们尝试更新表中的行数,则一切都会出错!我只是不知道如何解决此问题。
我只是在寻找一些指导。我已经在网上搜索并尝试了各种方法,但是由于我不太了解为什么它不起作用,因此我正在努力对其进行修复。
var row_f = 0;
function emptyRow2() {
row_f++;
this.obj = $("<tr class='test1'></tr>");
this.obj.append('<td>' + row_f + '</td>');
this.obj.append('<td><input type="checkbox" class="form-check-input position-static G2" id="G2-' + row_f + '" /></td>');
this.obj.append('<td><input type="checkbox" class="form-check-input position-static M42" id="M42-' + row_f + '" /></td>');
this.obj.append('<td><input type="checkbox" class="form-check-input position-static M43" id="M43-' + row_f + '" /></td>');
}
function refresh2(new_countf) {
//how many flats have been selected?
console.log("New count Rooms= " + new_countf);
if ((new_countf > 0) && (new_countf != 26)) {
$("#noa1_header").show();
$("tbody#noa1").show();
} else {
$("#noa1_header").hide();
$("tbody#noa1").hide();
}
var old_countf =($('tbody#noa1 tr.test1').length);
console.log("Old count Rooms= " + old_countf);
//what is the difference? Do we need to add or remove?
var rows_differencef = parseInt(new_countf) - old_countf;
console.log("Rows diff Rooms= " + rows_differencef);
// if we have rows to add
if (rows_differencef > 0) {
for (var f = 0; f < rows_differencef; f++)
$('tbody#noa1 ').append((new emptyRow2()).obj);
} else if (rows_differencef < 0) //if we need to remove rows...
{
var index_startf = old_countf + rows_differencef + 1;
console.log("Index start= " + index_startf);
$('.rooms-tbl tr.test1:gt(' + index_startf + ')').remove();
row_f += rows_differencef;
}
}
$(document).ready(function() {
$('#id_noa1').change(function() {
refresh2($(this).val());
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<table class="table rooms-tbl">
<tbody>
<tr>
<td class="w-75">Number of Rooms</td>
<td class="w-25">
<select class="form-control" name="noa1" id="id_noa1">
<option value="0">- Select -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<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>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">25+</option>
</select>
</td>
</tr>
</table>
</div>
</div>
<table class="table table-bordered text-center rooms-tbl">
<thead class="thead-light">
<!--<tr class="text-center">
<th colspan="4">Rooms</th>
</tr>-->
<tr id='noa1_header' style="display:none;">
<th scope="col">ID</th>
<th scope="col">Option One</th>
<th scope="col">Option Two</th>
<th scope="col">Option Three</th>
</thead>
<tbody id="noa1">
<tr><td>test</td></tr>
</tbody>
</table>
任何建议将不胜感激。
谢谢
答案 0 :(得分:1)
在计算index_startf
时,您需要减去1,而不要加1。这是因为:gt
是从零开始的,并且不包含指定的索引(大于而不是大于-或等于)。
您需要特别处理index_startf == -1
,因为jQuery不理解:gt(-1)
意味着应删除所有匹配项。
var row_f = 0;
function emptyRow2() {
row_f++;
this.obj = $("<tr class='test1'></tr>");
this.obj.append('<td>' + row_f + '</td>');
this.obj.append('<td><input type="checkbox" class="form-check-input position-static G2" id="G2-' + row_f + '" /></td>');
this.obj.append('<td><input type="checkbox" class="form-check-input position-static M42" id="M42-' + row_f + '" /></td>');
this.obj.append('<td><input type="checkbox" class="form-check-input position-static M43" id="M43-' + row_f + '" /></td>');
}
function refresh2(new_countf) {
//how many flats have been selected?
console.log("New count Rooms= " + new_countf);
if ((new_countf > 0) && (new_countf != 26)) {
$("#noa1_header").show();
$("tbody#noa1").show();
} else {
$("#noa1_header").hide();
$("tbody#noa1").hide();
}
var old_countf = ($('tbody#noa1 tr.test1').length);
console.log("Old count Rooms= " + old_countf);
//what is the difference? Do we need to add or remove?
var rows_differencef = parseInt(new_countf) - old_countf;
console.log("Rows diff Rooms= " + rows_differencef);
// if we have rows to add
if (rows_differencef > 0) {
for (var f = 0; f < rows_differencef; f++)
$('tbody#noa1 ').append((new emptyRow2()).obj);
} else if (rows_differencef < 0) //if we need to remove rows...
{
var index_startf = old_countf + rows_differencef - 1;
console.log("Index start= " + index_startf);
if (index_startf == -1) {
$('.rooms-tbl tr.test1').remove();
} else {
$('.rooms-tbl tr.test1:gt(' + index_startf + ')').remove();
}
row_f += rows_differencef;
}
}
$(document).ready(function() {
$('#id_noa1').change(function() {
refresh2($(this).val());
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-6">
<table class="table rooms-tbl">
<tbody>
<tr>
<td class="w-75">Number of Rooms</td>
<td class="w-25">
<select class="form-control" name="noa1" id="id_noa1">
<option value="0">- Select -</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<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>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">25+</option>
</select>
</td>
</tr>
</table>
</div>
</div>
<table class="table table-bordered text-center rooms-tbl">
<thead class="thead-light">
<!--<tr class="text-center">
<th colspan="4">Rooms</th>
</tr>-->
<tr id='noa1_header' style="display:none;">
<th scope="col">ID</th>
<th scope="col">Option One</th>
<th scope="col">Option Two</th>
<th scope="col">Option Three</th>
</thead>
<tbody id="noa1">
<tr>
<td>test</td>
</tr>
</tbody>
</table>