dataTable的响应性不适用于前端插入

Question

我正在使用jquery脚本动态地将行插入到dataTable表中。该脚本可以很好地插入到dataTable中，但是问题仍然在于dataTable的响应能力（dataTable仅在第一行获得响应，而在新添加的其他行则没有响应）

下面是我尝试的代码。

inovice.php-第一部分 ///////////////////////////////////////////////////// /////////////////////

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="vendor/datatables/js/jquery.dataTables.min.js"></script>
<script src="vendor/datatables-plugins/dataTables.bootstrap.min.js"></script>
<script src="vendor/datatables-responsive/dataTables.responsive.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".add-row").click(function(){
        var name = $("#name").val();
        var email = $("#email").val();
        var name2 = $("#name2").val();
        var email2 = $("#email2").val();
        var name3 = $("#name3").val();
        var email3 = $("#email3").val();
        var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td><td>" + name2 + "</td>  <td>" + email2 + "</td><td>" + name3 + "</td></tr>";

        $("table tbody").append(markup);
    });


});

invoice.php-part_2

///////////////////////////////////////////////// ////////////////////////

<form>
  <input type="text" id="name" placeholder="Name">
  <input type="text" id="email" placeholder="Email Address">
  <input type="text" id="name2" placeholder="Name">
  <input type="text" id="email2" placeholder="Email Address">
  <input type="text" id="name3" placeholder="Name">
  <input type="text" id="email3" placeholder="Email Address">
<input type="button" class="add-row" value="Add Row" id="addRow">
</form>

<div class="row">
  <div class="col-lg-12">
    <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
        <thead>
            <tr>
                <th>Column</th>
                <th>Column</th>
                <th>Column</th>
                <th>Column</th>
                <th>Column</th>
                <th>Column</th>
            </tr>
        </thead>
        <tbody>
          <tr>
              <td><input type="checkbox" name="record"></td>
              <td>Peter Parker</td>
              <td>peterparker@mail.com</td>
              <th>Value1</th>
              <th>Value2</th>
              <th>Value2</th>
          </tr>
        </tbody>
     </table>
  </div>

<script>
$(document).ready(function() {
    $('#dataTables-example').DataTable({
        responsive: true,

        "columnDefs": [
                        { "width": "10%", "targets": 0 }
                      ]
    });
});
</script>