javascript - 根据用户输入从表中删除行

Question

我是新来的，我正在寻找一些帮助。我正在学习 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>

如有任何建议，我们将不胜感激。

谢谢

Answer 1

计算index_startf时需要减1，而不是加1。这是因为:gt是从0开始的，不包括指定的索引(它大于，而不是大于或等于)。

您需要特别处理 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>