Как исправить: "Uncaught TypeError: Невозможно установить свойство '_DT_CellIndex' из неопределенного"

Question

Я новичок в Laravel, и я хотел начать с Bootstrap Modal.Я использую библиотеку DataTables и строю вокруг нее функцию Update, но получаю эту ошибку:

Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
    at Ha (jquery.dataTables.min.js:24)
    at O (jquery.dataTables.min.js:16)
    at HTMLTableRowElement.<anonymous> (jquery.dataTables.min.js:17)
    at app.js:1
    at Function.map (app.js:1)
    at E.fn.init.map (app.js:1)
    at na (jquery.dataTables.min.js:16)
    at e (jquery.dataTables.min.js:92)
    at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:93)
    at Function.each (app.js:1)

Вот мой код таблицы:

<div class="container">
  <table id="tabladedatos" class="table">
<thead class="thead-dark">
<tr>
  <th>ID</th>
  <th>First name</th>
  <th>Last name</th>
  <th>Address</th>
  <th>Mobile</th>
  <th>Action</th>
</tr>
</thead>
<tbody>
<tr>
  @foreach($emps as $emp)
    <tr>
      <td> {{$emp->id}} </td>
      <td> {{$emp->fname}} </td>
      <td> {{$emp->lname}} </td>
      <td> {{$emp->address}} </td>
      <td> {{$emp->mobile}} </td>
      <td>
        <a class="btn btn-success edit">Update</a>
        <a class="btn btn-danger">Delete</a>
      </td>
    </tr>
  @endforeach
</tr>
</tbody>
</table>
</div>

И вотФункция JS, где я использую DataTables:

<script type="text/javascript">

  $(document).ready(function(){

    var table = $('#tabladedatos').DataTable();

    //Edit Record
    table.on('click','.edit',function(){
      $tr = $(this).closest('tr');
      if($($tr).hasClass('child')){
        $tr = $tr.prev('.parent');
      }

      var data = table.row($tr).data();
      console.log(data);

      $('#fname').val(data[1]);
      $('#lname').val(data[2]);
      $('#address').val(data[3]);
      $('#mobile').val(data[4]);

      $('#editForm').attr('action', '/employee/'+data[0]);
      $('#editModal').modal('show');
    });


  });
</script>

Я видел, что эта ошибка обычно вызвана несоответствием между количеством th и td, но я не вижу несоответствия в этом коде.Пожалуйста, помогите мне!

Answer 1

Вы должны удалить тег <tr> до и после блока foreach.

<tbody>
  @foreach($emps as $emp)
    <tr>
      <td> {{$emp->id}} </td>
      <td> {{$emp->fname}} </td>
      <td> {{$emp->lname}} </td>
      <td> {{$emp->address}} </td>
      <td> {{$emp->mobile}} </td>
      <td>
        <a class="btn btn-success edit">Update</a>
        <a class="btn btn-danger">Delete</a>
      </td>
    </tr>
  @endforeach
</tbody>