jquery datatable row.add с событием кнопки в угловых 5

Question

Я новичок в JQuery Datatable.Я использую jquery datatable в angular 5. Я сталкиваюсь с проблемой функциональности динамического добавления строк.

addNewrow() {
    this.dataTable.row.add([<button onclick="myFun()" name="btn1">btn</button>,1,2,3]).draw(true);
  }

вышеупомянутый код, используемый в angular 5. В приведенном выше коде, как вы можете видеть, я добавил кнопку в jquery datatbleaddNewrow () - угловая функция, которая содержит код jquery.и я вызвал событие onClick на кнопке (btn1), которая вызывает myfun ().Моя проблема в том, что я не могу вызвать эту кнопку myfun ().Пожалуйста, дайте мне знать решение

Answer 1

Таким образом, я использую событие для кнопки в динамически добавленной строке в угловом 5, используя таблицы данных

addNewrow() {
        this.dataTable.row.add(['<script>function myFun(){alert("you click me");}</script><button onclick="myFun()" name="btn1">btn</button>',1,2,3]).draw(true);
      }

Answer 2

Вы можете добавить строку в таблицу, используя jquery, как показано ниже

function insertRow(){
  $('#table tbody').append(function(){
    return '<tr><td>inserted row </td><td><input type="button" value="new button added dynamically" onclick="insertRow()"</td></tr>'
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='table' style='border: 1px solid black'>
  <thead>
    <th>
      heading 1
    </th>
    <th>
      heading 2
    </th>
  </thead>
  <tbody>
    <tr>
      <td>
        table data 1
      </td>
      <td>
        table data 2
      </td>
    </tr>
  </tbody>
</table>

<input type='button' onclick='insertRow()' value='insert row' />