Динамическая таблица с возможностью удаления строки - PullRequest
Новая
       11

Динамическая таблица с возможностью удаления строки

0 голосов
/ 23 января 2019

У меня есть таблица с возможностью добавить новую строку с данными от пользователя и кнопку удаления (конечно, она удаляет определенную строку).Вроде как работает, НО у меня проблема в том, что кнопка работает после второго нажатия.

У меня есть счетчик i в моей функции Add(), который считает строки +1 (это добавить идентификатор в первом столбце к следующей добавленной строке).При удалении строки мне нужно изменить i в каждой более высокой строке (i--).И после этого, когда я добавляю новую строку, ее идентификатор неверен (он должен быть +1 к предыдущему, но он такой же).

Также обратите внимание, что когда я вызываю мою Delete() функцию из консоли, она работает просто отлично. 

$("#add_btn").click(function(){Add();});
var D;
var A;
var B;
var B;
var i=1;
function Add()
{
    D=$("#dropdown").val();
    A=$("#A").val();
    B=$("#B").val();
    C=$("#C").val();
      $("#myTable2").append(`
                    <tr id="row`+i+`">
                      <td class="clm1" id="id`+i+`">`+i+`.</td>
                      <td class="clm2">`+D+`</td>
                      <td class="clm3">`+A+`</td>
                      <td class="clm4">`+B+`</td>
                      <td class="clm5">`+B+`</td>
                      <td class="clm6" id="btn`+i+`"><input type="button" class="delete" id='delete`+i+`' value="x"></td>
                    </tr>`);  
        $("#delete"+i).click(function() {Delete(i);});
        n=i;
        i++;    

  }
function Delete(id)
{
    var j;
    i--;
    $("#row"+id+"").remove();
    for(j=id; j<n; j++)
   {
       a=Number(j)+1;
       $("#id"+a).html(j+".");
       $("#id"+a).prop("id", "id"+j);
       $("#btn"+a).html(`<input type="button" class="delete" id='delete`+j+`' value="x">`);
       $("#delete"+a).click(function(){Delete(j);});
       $("#btn"+a).prop("id", "btn"+j);
       $("#row"+a).prop("id", "row"+j);
   }
   
}
#container
{
    background-color: lightsteelblue;
    height:300px;
    width:600px;
    margin-left: auto;
    margin-right: auto;
    font-size:9px;
}
.tableContainer{
    height:auto;
    width:416px;
    border: solid black 1px;
    
   
}
#myTablecontainer
{
    width:100%;
    background-color: navy;
    border: solid lightgray 1px;
    border-bottom: none;
    border-top: none;
}
#myTable
{
   
    width:400px;
    height:auto;
    max-height: 150px;
    
    border-collapse: collapse;
    
    background-color: navy;
}
#myTable tr
{
   width:100%;
}
.MyTableHeadings
{
    
    font-weight: bold;
    text-align: center;
    background-color: navy;
    color:white;
    
    border-left: solid red 1px;
    padding-left: 5px;
    padding-right: 5px;
    
}
#myTable tr .clm1
{
   border-left: none;
}

.scrollContent
{
    height:auto;
    max-height: 300px;
    width:416px;
    overflow-y:auto;
    background-color: navy;
}
#myTable2
{
   
    width:400px;
    height:auto;
    max-height: 150px;
    border: solid lightgray 1px;
    border-collapse: collapse;
    
    
}
#myTable2 tr{
    width:100%;
}
#myTable2 tr:nth-child(even)
{
    background-color: lightgray;
}
#myTable2 tr:nth-child(odd) 
{
    background-color: lightslategrey;
}

#myTable2 td
{
    text-align: center;
     
     padding-left: 5px;
    padding-right: 5px;
}
.clm1{
    width:10%;
}
.clm2
{
    width: 25%;
}
.clm3
{
    width: 15%;
}
.clm4
{
    width:20%;
}

.clm5
{
    width:20%;
}
#myTable2 tr .clm6
{
    text-align: left;
    width: 10%;
}
<body>
        <div id="container">
            <fieldset>
                <legend>Dane</legend>
                   Dropdown
                    <select 
                    name="drp"
                    id="dropdown"
                    style="width:90px;"
                    >
                        <option value="0"></option>
                        <option value="1">1 </option>
                        <option value="2">2</option>
                     </select>
                    <br>
                A
                <input type="text" id="A">
                <br>
                B
                <input type="text" id="B">
                <br>
                C
                <input type="text" id="C">
                <input type="button" value='Add' id='add_btn'/>
            </fieldset>
            
                
                
                <div id="tableContainer" class="tableContainer">
                    <div id="myTablecontainer">
                        <table id="myTable" >
                                <tr>
                                  <th class='MyTableHeadings clm1'> ID</th>
                                  <th class='MyTableHeadings clm2'>H1</th>
                                  <th class='MyTableHeadings clm3'> H2</th>
                                  <th class='MyTableHeadings clm4'>H3</th>
                                  <th class='MyTableHeadings clm5'>H4</th>
                                  <th class='MyTableHeadings clm6'>Delete</th>
                                </tr>
                        </table>
                    </div>
                    <div class="scrollContent">
                        <table id="myTable2">
                        </table>
                    </div>
                </div>
        </div>
        
    </body>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

1 Ответ

0 голосов
/ 23 января 2019

Проблема заключается в том, что ваш первый щелчок добавляет обработчик событий, а при втором щелчке выполняется обработчик событий.Это также имеет нежелательный побочный эффект добавления все большего числа обработчиков событий при последующих щелчках.

Чтобы устранить проблему и улучшить логику, используйте делегированный обработчик событий.Таким образом, вы можете пройти DOM, чтобы найти связанный tr, используя closest().Это, в свою очередь, означает, что вы можете удалить все возрастающие атрибуты id.

Здесь следует отметить еще несколько вещей.Во-первых, пока вы используете шаблонные литералы, вы теряете их точку зрения при объединении значений.Вместо этого используйте синтаксис ${} для ввода значений.Вы также объявляете переменную B дважды;удалите один.

После всего сказанного попробуйте это: 

$("#add_btn").click(Add);
$('#myTable2').on('click', '.delete', function() {
  $(this).closest('tr').remove();
});

var D, A, B, i = 1;

function Add() {
  D = $("#dropdown").val();
  A = $("#A").val();
  B = $("#B").val();
  C = $("#C").val();
  $("#myTable2").append(`
    <tr>
      <td class="clm1">${i}.</td>
      <td class="clm2">${D}</td>
      <td class="clm3">${A}</td>
      <td class="clm4">${B}</td>
      <td class="clm5">${B}</td>
      <td class="clm6"><input type="button" class="delete" value="x"></td>
    </tr>`);
  i++;
}
#container {
  background-color: lightsteelblue;
  height: 300px;
  width: 600px;
  margin-left: auto;
  margin-right: auto;
  font-size: 9px;
}

.tableContainer {
  height: auto;
  width: 416px;
  border: solid black 1px;
}

#myTablecontainer {
  width: 100%;
  background-color: navy;
  border: solid lightgray 1px;
  border-bottom: none;
  border-top: none;
}

#myTable {
  width: 400px;
  height: auto;
  max-height: 150px;
  border-collapse: collapse;
  background-color: navy;
}

#myTable tr {
  width: 100%;
}

.MyTableHeadings {
  font-weight: bold;
  text-align: center;
  background-color: navy;
  color: white;
  border-left: solid red 1px;
  padding-left: 5px;
  padding-right: 5px;
}

#myTable tr .clm1 {
  border-left: none;
}

.scrollContent {
  height: auto;
  max-height: 300px;
  width: 416px;
  overflow-y: auto;
  background-color: navy;
}

#myTable2 {
  width: 400px;
  height: auto;
  max-height: 150px;
  border: solid lightgray 1px;
  border-collapse: collapse;
}

#myTable2 tr {
  width: 100%;
}

#myTable2 tr:nth-child(even) {
  background-color: lightgray;
}

#myTable2 tr:nth-child(odd) {
  background-color: lightslategrey;
}

#myTable2 td {
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}

.clm1 {
  width: 10%;
}

.clm2 {
  width: 25%;
}

.clm3 {
  width: 15%;
}

.clm4 {
  width: 20%;
}

.clm5 {
  width: 20%;
}

#myTable2 tr .clm6 {
  text-align: left;
  width: 10%;
}
<div id="container">
  <fieldset>
    <legend>Dane</legend>
    Dropdown
    <select name="drp" id="dropdown" style="width:90px;">
      <option value="0"></option>
      <option value="1">1 </option>
      <option value="2">2</option>
    </select><br> 
    A <input type="text" id="A"><br> 
    B <input type="text" id="B"><br> 
    C <input type="text" id="C">
    <input type="button" value='Add' id='add_btn' />
  </fieldset>
  <div id="tableContainer" class="tableContainer">
    <div id="myTablecontainer">
      <table id="myTable">
        <tr>
          <th class="MyTableHeadings clm1">ID</th>
          <th class="MyTableHeadings clm2">H1</th>
          <th class="MyTableHeadings clm3">H2</th>
          <th class="MyTableHeadings clm4">H3</th>
          <th class="MyTableHeadings clm5">H4</th>
          <th class="MyTableHeadings clm6">Delete</th>
        </tr>
      </table>
    </div>
    <div class="scrollContent">
      <table id="myTable2"></table>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
...