Question

我是jquery数据表的新手。我正在用angular 5使用jquery数据表。我遇到了动态行添加功能的问题。

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

上面的代码在angular 5中使用。在上面的代码中，您可以看到我已经向jquery datatble添加了按钮addNewrow（）是包含jquery代码的angular函数。并且我在button（btn1）上触发了onClick事件，该事件调用了myfun（）。我的问题是我无法在按钮中调用该myfun（）。请您让我知道解决方法

Answer 1

您可以使用下面的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' />

Answer 2

通过这种方式，我使用数据表在角度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);
      }

jQuery datatable row.add与Angular 5中的按钮事件

2 个答案: