How can I delete a row in a table by 'onclick' on a button that is dynamically generated w-CodePudding

I made a table that is dynamically generated. I must have a button in the last column of each line that as soon as I click it two things will happen:

The entire line will be marked with <strike>
The ID of the row will go into a special array.

The last td in each row is a button from a class called trash_button to which a jQuery function is linked that should cause each button from that class to add to its row a section called strikethrough

The problem is that the buttons I tried to make just don't work. Even though the function is linked to their class, from tests I did, it turns out that pressing the button does not even call the function.

I really can not understand what is wrong here.

function CreateTableFromJSON() {
  var animals = [{
      "animalId": "1",
      "animalName": "elephent",
      "cageNum": "231",
      "legsNum": "4"
    },
    {
      "animalId": "2",
      "animalName": "tiger",
      "cageNum": "324",
      "legsNum": "56.00"
    },
    {
      "animalId": "3",
      "animalName": "wolf",
      "cageNum": "414",
      "legsNum": "210.40"
    }
  ]
  
  var tableBody = '<table id="table"><tr class="tr tr1"><td class="td1">animal Id</td><td class="td1">animal name</td><td class="td1">cage Number</td><td class="td1">legs Number</td><td class="td1">delete</td></tr>';

  animals.forEach(function(d) {
     tableBody  = '<tr class="tr tr2"><td class="td2">' d.animalId
      '</td><td class="td2">'  d.animalName
       '</td><td class="td2">' d.cageNum
       '</td><td class="td2">' d.legsNum
       '</td><td class="td2"><input type="button" class="trash_button"><img src="https://via.placeholder.com/24" width="100%" height="100%"></input></td></tr>';
  });

  var divContainer = document.getElementById("showData");
  divContainer.innerHTML = tableBody;
}

$(document).ready(function() {
  $(".trash_button").on('click', function() {
    var currentRow = $(this).closest("tr");

    if (document.getElementById(currentRow.id).classList.contains('strikethrough')) {
      document.getElementById(currentRow.id).classList.remove('strikethrough');
    } else {
      document.getElementById(currentRow.id).classList.add('strikethrough');
    }
  });
});

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

<button onclick="CreateTableFromJSON()" value="Create Table From JSON">animal table</button>

<div id="showData">(Div added by community)</div>

CodePudding user response：

If you're adding markup dynamically you need to use event delegation to catch the clicks on the buttons as they bubble up the DOM. You should also stick with either jQuery or vanilla JS.

function CreateTableFromJSON() {

  const animals = [{
      "animalId": "1",
      "animalName": "elephent",
      "cageNum": "231",
      "legsNum": "4"
    },
    {
      "animalId": "2",
      "animalName": "tiger",
      "cageNum": "324",
      "legsNum": "56.00"
    },
    {
      "animalId": "3",
      "animalName": "wolf",
      "cageNum": "414",
      "legsNum": "210.40"
    }
  ]

  let tableBody = '<table id="table"><tr class="tr tr1"><td class="td1">animal Id</td><td class="td1">animal name</td><td class="td1">cage Number</td><td class="td1">legs Number</td><td class="td1">delete</td></tr>';

  animals.forEach(function(d) {
    tableBody  = '<tr class="tr tr2"><td class="td2">'   d.animalId   '</td><td class="td2">'   d.animalName   '</td><td class="td2">'   d.cageNum   '</td><td class = "td2">'   d.legsNum   '</td><td class="td2"><img class="trash_button" src="https://dummyimage.com/80x20/b87d7d/000&text=Delete" /></td></tr>';
  });

  $('#showData').html(tableBody);

}

$(document).ready(function() {
  $(document).on('click', '.trash_button', function() {
    $(this).closest('tr').toggleClass('strikethrough');
  });
});

.strikethrough { text-decoration: line-through; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="CreateTableFromJSON()" value="Create Table From JSON">animal table</button>
<table id="showData"></table>

CodePudding user response：

I would use the id and data attributes to specifically target each element:


animals.forEach( function(animal) {
  //I've shortened for brevity, note I'm also using backticks to use js literal syntax
  tableBody  = `<tr class="tr" id="animal-${animal.animalId}">
                  <td>${animal.animalName}</td>
                  <td><button class="trash_button" data-id="${animal.animalId}">Delete</button>
                </tr>`
});


......

$(document).ready(function() {
  $('.trash_button').on('click', function(button) {
    let id = button.data.id;
    $(`#animal-${id}`).toggleClass('strikethrough');
  });
});