jQuery如何修复Cannot set property '_DT_CellIndex' of undefined错误？

Question

我刚接触Jquery，我想让用户添加新行并在单击“添加”按钮后将重要信息添加到数据库中，然后自动重新加载表格。 运行后，我发现数据已成功添加到数据库中，但“tablebqup”不再重新加载，我发现了这个错误：

Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined

这里是添加新元素的函数：

    $("#newbq").click(function () {
    var indexadd= $('table#tablebqup tr:last').index() + 1;
    //Now add this row to the table:
    var row='<tr><td></td><td  contenteditable="true"></td><td  contenteditable="true"></td><td  contenteditable="true"></td><td  contenteditable="true"></td><td  contenteditable="true"></td><td colspan="2"> <button id="add'+indexadd+'" class="btn btn-info addbc" name="button">Ajouter</button> </td></tr>';
    $('#tablebqup').append(row);
    $(".addbc").click(function () {
      var nombc=($(this).parent().parent().find('td:eq(1)').html());
      var abrv= ($(this).parent().parent().find('td:eq(2)').html());
      var sigsoc=($(this).parent().parent().find('td:eq(3)').html());
      var telf=($(this).parent().parent().find('td:eq(4)').html());
      var fx=($(this).parent().parent().find('td:eq(5)').html());
    //  if (nombc=="" || abrv=="" || sigsoc=="" || (telf=="" && fx==""))
    if (nombc=="")
      {
        alert("Rempier toutes les informations de la banque d'abord")
      }
      else {
        $choix=confirm("voulez vous vraiment ajouter la banque");
         if ($choix)
         {
           console.log(nombc);
           $.post(basUrl+'views/component/updtbq.php',
             {
               action:'add_bq',
               nomb:nombc,
               abrvb:abrv,
               sigsocial:sigsoc,
               tel:telf,
               fax:fx,
             }, function(data) {
               alert(data);
             $('#tablebqup').DataTable().ajax.reload();//My problem is here
            });
          }
       }
      });
  });

第一次运行时，它显示了类似这样的内容：

“Uncaught TypeError: $(…).DataTable is not a function”

为解决这个问题，我添加了相应的链接和脚本：

这样做后，错误信息变为：

Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined

让我惊讶的是，我之前就使用过类似的逻辑，我的意思是使用相同的方法：

 $('#tablebqup').DataTable().ajax.reload(); 

当我点击另一个按钮以修改数据库中的信息时，可以这样操作：

 $(".modif").click(function () {
     $choix=confirm("voulez vous vraiment sauvegarder les modifications");
     if ($choix)
     {
       var id=($(this).parent().parent().find('td:eq(0)').html());// the value in the 1st column.
       var nombc=($(this).parent().parent().find('td:eq(1)').html());
       var abrv= ($(this).parent().parent().find('td:eq(2)').html());
       var sigsoc=($(this).parent().parent().find('td:eq(3)').html());
       var telf=($(this).parent().parent().find('td:eq(4)').html());
       var fx=($(this).parent().parent().find('td:eq(5)').html());
       console.log(id);
       $.post(basUrl+'views/component/updtbq.php',
         {
           action:'update_bq',
           idbc:id,
           nomb:nombc,
           abrvb:abrv,
           sigsocial:sigsoc,
           tel:telf,
           fax:fx,
         }, function(data) {
         $('#tablebqup').DataTable().ajax.reload();
        });
      }

不必添加这两个链接也可以完美地进行工作！！！

以下是错误的详细信息：

Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
    at Ga (datatables.min.js:36)
    at M (datatables.min.js:28)
    at HTMLTableRowElement.<anonymous> (datatables.min.js:28)
    at jquery-3.2.1.min.js:2
    at Function.map (jquery-3.2.1.min.js:2)
    at r.fn.init.map (jquery-3.2.1.min.js:2)
    at ma (datatables.min.js:28)
    at e (datatables.min.js:104)
    at HTMLTableElement.<anonymous> (datatables.min.js:104)
    at Function.each (jquery-3.2.1.min.js:2)

这是我的 PHP 文件：

function add_bq()
{
  if((isset($_POST['nomb']))
  &&(isset($_POST['abrvb']))
  &&(isset($_POST['sigsocial']))
  &&(isset($_POST['tel']))
  &&(isset($_POST['fax']))
  ){
    $nomb=trim($_POST['nomb']);
    $abrv=trim($_POST['abrvb']);
    $sigc=trim($_POST['sigsocial']);
    $tel=trim($_POST['tel']);
    $fax=trim($_POST['fax']);
    //Update les banques
    MainController::addBanque($nomb,$abrv,$sigc,$tel,$fax);
   include 'C:/wamp/www/Mini_Prj/views/component/tbbanqueupd.php';
  }

以下是所包含的文件："tbbanqueupd.php"：

<?php
require_once("C:/wamp/www/Mini_Prj/controllers/mainController.php");
$bnqs=MainController::getBanque();
echo'
<div>
<h3>  Mise a jours des banques</h3>
<div >

  <div class="table-responsive">
  <table id="tablebqup" class="tableau table table-fixed table-bordered table-dark table-hover ">
  <thead>
    <tr>
      <th>Id Banque</th>
      <th>Nom de la banque</th>
      <th>Abrev </th>
      <th>Siège Sociale</th>
      <th>Tel</th>
      <th>Fax</th>
      <th>Modifier</th>
      <th>Supprimer</th>
    </tr>
  </thead>
  <tbody>
  <form method="post">
  ';
  $i=0;
foreach ($bnqs as $bnq) {

echo
" <tr>
<td>".$bnq['idbc']."</td>
<td  contenteditable='true'>".$bnq['nomb']."</td>
<td  contenteditable='true'>".$bnq['abrvb']."</td>
<td  contenteditable='true'>".$bnq['sigsocial']."</td>
<td  contenteditable='true'>".$bnq['tel']."</td>
<td  contenteditable='true'>".$bnq['fax']."</td>
<td> <button id='modif$i' class='btn btn-info modif' name='button'>Modifier</button> </td>
<td> <button id='supp$i' class='btn btn-info supp' name='button' onclick='suprimer(this.id)'>Supprimer</button> </td>
</tr>";
$i++;
}
echo'
</form>
  </tbody>
</table>
</div>
<button type="button" class="btn btn-info" name="button" id="newbq" >Nouvelle banque</button>
</div>
</div>';

我想也许问题是因为我允许用户不填写所有信息，但我希望这样的方式是用户只输入重要字段。我该如何解决这个问题？能有人帮忙吗。

- DINA TAKLIT

Answer 1

当 td 的数量与 th 不匹配或者使用了 colspan 时，会出现这个错误。

根据您的 CSS，可能很难看到错误。我建议在测试时向表格添加边框...

- hexYeah

---

是的，你是对的解决了那个问题。我添加了这一行代码$('#tablebqup tr:last').remove(); 因为我动态地添加了新的行，一旦用户想要添加新的项目。写入的问题已经解决了，但是出现了新的问题：datatables.min.js:48 Uncaught TypeError: Cannot set property 'data' of null。 - DINA TAKLIT

请告诉我为什么会出现这个最后的错误，我该怎么做？ - DINA TAKLIT

很难说...脚本那时候在尝试做什么？ - hexYeah

现在它显示了所有的行，除了新增的那一行。 - DINA TAKLIT

我将添加我的 PHP 文件。 - DINA TAKLIT

当我使用 colspan 时，会生成这样的错误。现在我已经删除了 colspan 来解决这个问题。谢谢。 - Kamlesh

Answer 2

我在thead-th部分和tbody-td部分有正确数量的列。在任何th或td元素上没有添加colspan，但我仍然遇到了同样的问题。我进行了更多的研究，并发现我禁用了一个不存在于我的数据表中的列号的排序功能。

实际上，在我的数据表中只有4列，而我却试图禁用第6列的排序功能。这是一个意外。我忘记改变它。代码如下：

$(document).ready(function()
{
    $('#datatable').DataTable( {
        "aoColumnDefs": [
            { 'bSortable': false, 'aTargets': [0,1,6] }
        ],
        responsive: true,
    });
});

然后我改变了'aTargets'的值，根据我的情况可以设置最多3个，正确的代码如下：

$(document).ready(function()
{
    $('#datatable').DataTable( {
        "aoColumnDefs": [
            { 'bSortable': false, 'aTargets': [0,1,3] }
        ],
        responsive: true,
    });
});

这对我很有帮助。很高兴能分享和帮助其他人 :)

- Kamlesh

Answer 3

一个简单的错误，表头有一列“”没有标题，但这一列在表格本身中不存在。由于没有标题和边框，我看不到它缺失了。

通过查看datatable.js中给出的错误行，得到了帮助——暗示有一个tr出了问题，因此更仔细地查看了我的表格而非整体代码。

- Paras Sharma

Answer 4

从你的代码中，我没有看到DataTabe初始化的部分，通常放在Document Ready函数内。所以：

• 尝试使用显式配置为每个列初始化表格（“visible：true”是一个虚拟设置，仅确认它可见）
• 将“datatable”类添加到您的表格HTML中。例如：

示例：

$(document).ready(function () {
var myTable= $('#tablebqup').DataTable({
    columns:[
    //"dummy" configuration
        { visible: true }, //col 1
        { visible: true }, //col 2
        { visible: true }, //col 3
        { visible: true }, //col 4
        { visible: true }, //col 5
        { visible: true }, //col 6 
        { visible: true }, //col 7
        { visible: true }  //col 8 
        ]
    });
});

在HTML上：

<table id="tablebqup" class="tableau table datatable table-fixed table-bordered table-dark table-hover ">

说明：

“DataTable”初始化方法在其配置中应该具有与html中<th> / <td>的数量相同的列数。

错误示例：

 //Javascript Code
 var myTable= $('#myTableId').DataTable({
    columns: [
        //any column configuration
        { "bSearchable": false }, //col 1
        { "bSearchable": true },  //col 2
        { "bSearchable": true },  //col 3
        { "bSearchable": false }, //col 4
        { "bSearchable": false }, //col 5
        { "bSearchable": false } //col 6 
    ]
});

而且HTML标记：

<table id="myTable" class="table datatable">
<thead>
    <tr>
        <th>col 1 header</th>
        <th>col 2 header</th>
        <th>col 3 header</th>
        <th>col 4 header</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td> data col 1, row 1</td>
        <td> data col 2, row 1</td>
        <td> data col 3, row 1</td>
        <td> data col 4, row 1</td>
    </tr>
</tbody>
</table>

即使HTML中的和数量匹配，但在DataTable方法中配置更多的列会导致抛出此异常。在此示例中，从DataTable方法中删除第5列和第6列的配置行将修复错误。

- Mudo

---

我有一个类似的问题，但是列的数量是根据所选日期范围动态生成的。我还必须使用像colspan="2"和rowspan="3"这样的属性。那么解决方案是什么？ - bhattraideb

如果DataTable动态生成列和行，则应添加一些回调函数来将它们添加/删除到DOM中。 - Mudo