javascript - 如何解决:“未捕获的 TypeError:无法设置未定义的属性 '_DT_CellIndex'”
问题描述
我是 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 的数量不匹配引起的,但是我在这段代码中看不到不匹配的地方。请帮我!
解决方案
<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>
推荐阅读
- vba - VBA 代码 32 位到 64 位
- pyspark - 未能在 Delta 表中保存结构字段
- php - php:如何使用 simplexml_load_file 解析节点名称中包含“:”的 XML?
- python - 尝试使用 pip 在 Python 中安装 ssl 库时出现语法错误
- python - PySpark/python- 我尝试使用 for 循环,但它返回空数据帧。我该如何解决?
- c# - C# - 数学/逻辑 - 检查哪个值更接近
- neo4j - Neo4J 数据库性能
- javascript - Angular添加具有相同属性的行
- docker - Teamcity 锁定安装在 Docker 容器内的目录
- javascript - 响应式数据表 - 显示数据表警告