SallyA
Reputation: 57
Remove rows from table based on user input
I'm new here and I am looking for a bit of help please. I am learning jQuery/Javascript and have run into a problem which I just can't figure out.
I have a table and the rows are created based on the number a user selects from a dropdown. The user can add or remove rows by changing the number in the dropdown. This all works perfectly but I would like to add a tr directly after the <tbody>, this tr should not be removed by the user. All new rows, should appear after this initial row.
I have it working so the user can add new rows after this initial tr but if they attempt to update the number of rows in the table it all goes wrong! I just can't figure out how to fix this.
I am just looking for some guidance please. I have searched online and tried various things but because I don't quite understand why it's not working, I'm struggling to fix it.
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>Any advice would be greatly appreciated.
Thanks
Upvotes: 3
Views: 109
Answers (1)
Barmar
Reputation: 781210
When calculating index_startf you need to subtract 1, not add 1. This is because :gt is zero-based, and it doesn't include the specified index (it's greater-than, not greater-than-or-equal).
You need to handle index_startf == -1 specially, because jQuery doesn't understand :gt(-1) to mean that all the matches should be removed.
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>Upvotes: 1
Related Questions
- Remove a row from Html table based on condition
- How to remove certain rows from a table?
- Deleting rows from a table
- Remove Row from table using jQuery
- How do I remove a row from a table
- remove table rows with modifying data
- remove row when element in table found
- Removing rows from table
- JQuery remove selected rows from a table
- Removing a row from a table using javascript