javascript - 如何仅在 jquery 数据表中删除子行？

Question

我有一个静态的 2 行，它是默认值。我想在默认行下方添加更多行..而且我不知道如何在不删除父行的情况下删除子行..

我的父行是默认的两行。我不想删除那两行..我只想删除子行..

var ctr = 1;
var FieldCount = 1;
$('#cashTable').on('click', '.button-add', function() {
  ctr++;
  var cashacc_code = 'cashacc_code' + ctr;
  var cashacc = 'cashacc' + ctr;
  var cash_narrat = 'cash_narrat' + ctr;
  var cashdeb = 'cashdeb' + ctr;
  var cashcredit = 'cashcredit' + ctr;
  var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + cashacc_code + ' placeholder="NNNN" /></td><td><select class="form-control" id="cashacc" ><option value="">Choose an Items</option><option value="1">Joe</option><option value="2">Joe</option><option value="3">Joe</option></select></td><td><input type="text" class=' + "joe" + ' id=' + cash_narrat + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe" + ' id=' + cashdeb + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + cashcredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>';
  $('#cashTable').append(newTr);
  // delete row
  $(document).ready(function() {
    $('.dlt-icon').click(DeleteRow);
  });

  function DeleteRow() {
    $(this).parents('tr').first().remove();
  }
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<table id="cashTable" class="table table-bordered table-striped" required>
  <thead>
    <tr>
      <th>A/c Code</th>
      <th>Account Name*</th>
      <th>Narration*</th>
      <th>Debit*</th>
      <th>Credit</th>
    </tr>
  </thead>
  <tbody>
    <tr id="fst_row">
      <!-- First row -->
      <td>
        <input type="number" id="cashacc_code" placeholder="NNNN" class="form-control" name="cashacc_code" />
      </td>
      <td>
        <select class="form-control selectsch_items" name="cashacc" id="cashacc">
          <option value="Choose and items">Choose and items</option>
          <option value="1">TDS A/c Name 1</option>
          <option value="2">TDS A/c Name 2</option>
        </select>
      </td>
      <td>
        <input type="text" id="cash_narrat" placeholder="Enter here" class="form-control" pattern="[a-zA-Z0-9-_.]{1,20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" />
      </td>
      <td>
        <input type="number" id="cashdeb" placeholder="Debit Amount" class="form-control" name="cashdeb" readonly/>
      </td>
      <td>
        <input type="text" id="cashcredit" class="form-control" name="cashcredit" readonly/>
      </td>
      <td style="width: 4%">
        <a href="#"><img src="./img/plus.svg" class="insrt-icon button-add"></a>
        <a href="#"><img src="./img/delete.svg" class="dlt-icon button-add"></a>
      </td>
    </tr>

    <!-- Second Row -->

    <tr id="sndRow">
      <td>
        <input type="number" class="form-control" id="rowNum" name="cashaccCode" placeholder="NNNN" />
      </td>
      <td>
        <select class="form-control selectsch_items" name="cashacc_nme" id="cashacc_nme">
          <option value="#">Choose and items</option>
          <option value="1">Joe</option>
          <option value="2">Joe2</option>
        </select>
      </td>
      <td>
        <input type="text" class="form-control" id="acc_narrat" placeholder="Enter here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
      </td>
      <td>
        <input type="number" class="form-control" id="accdeb" placeholder="NNNNNN" name="accdeb" />
      </td>
      <td>
        <input type="number" id="accCredit" class="form-control" name="accCredit" readonly/>
      </td>
      <td style="width: 4%">
        <a href="#"><img src="./img/plus.svg" class="insrt-icon button-add"></a>
        <a href="#"><img src="./img/delete.svg" class="dlt-icon"></a>
      </td>
    </tr>

  </tbody>
</table>

如果你不明白，请告诉我。。

标签： javascriptjqueryhtmlcssajax

Answer 1

如果您不想删除已经创建的前两行，请使用.jsrow如下

您需要了解的另一件事是类的使用，您button-add在按钮添加和删除中都添加了类，因此请查看我的代码并更正它。

var ctr = 1;
var FieldCount = 1;
$('#cashTable').on('click', '.button-add', function() {
  ctr++;
  var cashacc_code = 'cashacc_code' + ctr;
  var cashacc = 'cashacc' + ctr;
  var cash_narrat = 'cash_narrat' + ctr;
  var cashdeb = 'cashdeb' + ctr;
  var cashcredit = 'cashcredit' + ctr;
  var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + cashacc_code + ' placeholder="NNNN" /></td><td><select class="form-control" id="cashacc" ><option value="">Choose an Items</option><option value="1">Joe</option><option value="2">Joe</option><option value="3">Joe</option></select></td><td><input type="text" class=' + "joe" + ' id=' + cash_narrat + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe" + ' id=' + cashdeb + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + cashcredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>';
  $('#cashTable').append(newTr);
  // delete row
 

  
});

 $(document).on( 'click', '.dlt-icon', function() {
    $(this).parents('tr.jsrow').first().remove();
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="cashTable" class="table table-bordered table-striped" required>
  <thead>
    <tr>
      <th>A/c Code</th>
      <th>Account Name*</th>
      <th>Narration*</th>
      <th>Debit*</th>
      <th>Credit</th>
    </tr>
  </thead>
  <tbody>
    <tr id="fst_row">
      <!-- First row -->
      <td>
        <input type="number" id="cashacc_code" placeholder="NNNN" class="form-control" name="cashacc_code" />
      </td>
      <td>
        <select class="form-control selectsch_items" name="cashacc" id="cashacc">
          <option value="Choose and items">Choose and items</option>
          <option value="1">TDS A/c Name 1</option>
          <option value="2">TDS A/c Name 2</option>
        </select>
      </td>
      <td>
        <input type="text" id="cash_narrat" placeholder="Enter here" class="form-control" pattern="[a-zA-Z0-9-_.]{1,20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" />
      </td>
      <td>
        <input type="number" id="cashdeb" placeholder="Debit Amount" class="form-control" name="cashdeb" readonly/>
      </td>
      <td>
        <input type="text" id="cashcredit" class="form-control" name="cashcredit" readonly/>
      </td>
      <td style="width: 4%">
        <a href="#"><img src="./img/plus.svg" class="insrt-icon button-add"></a>
        <a href="#"><img src="./img/delete.svg" class="dlt-icon "></a>
      </td>
    </tr>

    <!-- Second Row -->

    <tr id="sndRow">
      <td>
        <input type="number" class="form-control" id="rowNum" name="cashaccCode" placeholder="NNNN" />
      </td>
      <td>
        <select class="form-control selectsch_items" name="cashacc_nme" id="cashacc_nme">
          <option value="#">Choose and items</option>
          <option value="1">Joe</option>
          <option value="2">Joe2</option>
        </select>
      </td>
      <td>
        <input type="text" class="form-control" id="acc_narrat" placeholder="Enter here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
      </td>
      <td>
        <input type="number" class="form-control" id="accdeb" placeholder="NNNNNN" name="accdeb" />
      </td>
      <td>
        <input type="number" id="accCredit" class="form-control" name="accCredit" readonly/>
      </td>
      <td style="width: 4%">
        <a href="#"><img src="./img/plus.svg" class="insrt-icon button-add"></a>
        <a href="#"><img src="./img/delete.svg" class="dlt-icon"></a>
      </td>
    </tr>

  </tbody>
</table>