Как удалить добавленное добавление в tbody?

ProgramBox

Как удалить добавленное добавление в tbody?

Post author:admin
Запись опубликована:13 февраля, 2023
Post category:Вопросы по программированию

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня есть этот фрагмент ниже, который работает нормально. Как получить ID or Class данные добавления из флажка. Как я пытаюсь использовать приведенный ниже код$('.chk').click(function(){ console.log(cc);}) , но он не работает. То, что я хочу сделать, это после того, как я добавил две строки, и я устанавливаю 1-й флажок в добавленных данных и нажимаю удалить, он будет удален, потому что у него есть проверка.

 $(".checkAll").change(function() {
  $(".selectall").prop('checked', $(this).prop("checked"));
  $(".gone").removeAttr('checked');
});

$('.vv .ww').on('click', function() {
  $("tbody").append('<tr class="remove"><td><input class="chk" type="checkbox" <td></tr>');
});

$('.chk').click(function() {
  console.log(cc);
})

$('.gone').click(function() {
  var aa = $('.chk').val();
  var bb = $('.chk').is('checked');
  console.log(aa);
  console.log(bb);
  $(".remove").remove();
});

 @media only screen and (max-width: 640px) {
  /* Force table to not be like tables anymore */
  .no-more-tables table,
  .no-more-tables thead,
  .no-more-tables tbody,
  .no-more-tables th,
  .no-more-tables td,
  .no-more-tables tr {
    display: block;
  }
  /* Hide table headers (but not display: none;, for accessibility) */
  .no-more-tables thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .hdv {
    width: 46%;
    padding: 5px;
    display: inline-block;
  }
  .dsp {
    font-weight: bold;
  }
  .no-more-tables tr {
    border: 1px solid #ccc;
  }
  .no-more-tables td {
    /* Behave  like a "row" */
    width: 100%;
    border: none;
    border-bottom: 1px solid #eee;
    white-space: normal;
    text-align: left;
  }
  /*
	Label the data
	*/
}
.cf {
  width: 100%;
}
.cf > tr > th {
  text-align: left;
}
.cf > tbody > tr > td {
  height: 25px;
}
.newvariation > td > input:focus {
  outline: 0px !important;
  -webkit-appearance: none;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
.vv > div {
  margin: 5px;
  display: inline-block;
  cursor: pointer;
}
@media only screen and (min-width: 641px) {
  .dsp {
    visibility: hidden;
    display: none;
  }
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="no-more-tables">
  <table class="table-bordered table-striped table-condensed cf">
    <thead class="cf">
      <tr>
        <th class="c1">
          <input type="checkbox" class="checkAll" />
        </th>
        <th class="c2">Product</th>

      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="checkbox" class="selectall" />
        </td>
        <td>
          <span class="hdv dsp">Product</span>
          <span class="hdv" contenteditable="true">iPhone 7 Plus</span>
        </td>
        <td>

        </td>


      </tr>

    </tbody>
  </table>
</div>
<div class="vv">
  <div class="ww">  Add new Line</div>
  <div class="gone">- Remove selected</div>
</div>

1. $('.chk').click(function(){ изменить на $(document).on('click','.chk',function(){

2. @guradio Как я могу определить, установлен флажок или нет?. В моем текущем коде это приводит к on и false

3. попробуйте использовать $(document).on('change','.chk:chcked',function(){

4. @guradio сейчас он работает. Но моя последняя проблема не решена. Я хочу, чтобы в добавленных данных был удален флажок только с проверкой. Я пытаюсь использовать if , но, думаю, мне все еще не хватает.

Ответ №1:

По сути, вам просто нужно установить только установленный флажок с chk классом, а затем найти этих родителей с remove классом.

Ниже приведена редакция вашего сниппета.

 $(".checkAll").change(function() {
  $(".selectall").prop('checked', $(this).prop("checked"));
  $(".gone").removeAttr('checked');
});

$('.vv .ww').on('click', function() {
  $("tbody").append('<tr class="remove"><td><input class="chk" type="checkbox" <td></tr>');
});

$('.chk').click(function() {
  console.log(cc);
})

$('.gone').click(function() {
  $('input:checked.chk').each(function(idx, item){
		var row = $(item).parents(".remove");
    if (row != null)
    	row.remove();
  });
});

 @media only screen and (max-width: 640px) {
  /* Force table to not be like tables anymore */
  .no-more-tables table,
  .no-more-tables thead,
  .no-more-tables tbody,
  .no-more-tables th,
  .no-more-tables td,
  .no-more-tables tr {
    display: block;
  }
  /* Hide table headers (but not display: none;, for accessibility) */
  .no-more-tables thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .hdv {
    width: 46%;
    padding: 5px;
    display: inline-block;
  }
  .dsp {
    font-weight: bold;
  }
  .no-more-tables tr {
    border: 1px solid #ccc;
  }
  .no-more-tables td {
    /* Behave  like a "row" */
    width: 100%;
    border: none;
    border-bottom: 1px solid #eee;
    white-space: normal;
    text-align: left;
  }
  /*
	Label the data
	*/
}
.cf {
  width: 100%;
}
.cf > tr > th {
  text-align: left;
}
.cf > tbody > tr > td {
  height: 25px;
}
.newvariation > td > input:focus {
  outline: 0px !important;
  -webkit-appearance: none;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
.vv > div {
  margin: 5px;
  display: inline-block;
  cursor: pointer;
}
@media only screen and (min-width: 641px) {
  .dsp {
    visibility: hidden;
    display: none;
  }
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="no-more-tables">
  <table class="table-bordered table-striped table-condensed cf">
    <thead class="cf">
      <tr>
        <th class="c1">
          <input type="checkbox" class="checkAll" />
        </th>
        <th class="c2">Product</th>

      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <input type="checkbox" class="selectall" />
        </td>
        <td>
          <span class="hdv dsp">Product</span>
          <span class="hdv" contenteditable="true">iPhone 7 Plus</span>
        </td>
        <td>

        </td>


      </tr>

    </tbody>
  </table>
</div>
<div class="vv">
  <div class="ww">  Add new Line</div>
  <div class="gone">- Remove selected</div>
</div>