如何修复：“未捕获的 TypeError：无法设置未定义的属性 '_DT_CellIndex'”答案

【问题标题】：How to fix: "Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined"如何修复：“未捕获的 TypeError：无法设置未定义的属性 '_DT_CellIndex'”
【发布时间】：2019-06-16 21:43:04
【问题描述】：

我是 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>

这是我使用 DataTables 的 JS 函数：

<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 的数量不匹配引起的，但是我在这段代码中看不到不匹配的地方。请帮帮我！

【问题讨论】：

标签： javascript jquery html laravel datatables

【解决方案1】：

你应该在foreach块之前和之后删除<tr>标签。

<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>

【讨论】：

错了！谢谢！