jQuery如何修复无法设置未定义的属性'_DT_CellIndex'？

Posted 2023-02-22

【中文标题】jQuery如何修复无法设置未定义的属性\'_DT_CellIndex\'？

【英文标题】：jQuery how to fix Cannot set property '_DT_CellIndex' of undefined?jQuery如何修复无法设置未定义的属性'_DT_CellIndex'？

【发布时间】：2018-06-28 05:43:10

【问题描述】：

我是 Jquery 的新手，我希望用户添加新行并在他单击“Ajouter”按钮后提供重要信息，它将添加到数据库中，然后自动重新加载表。 一旦我运行，我发现数据成功添加到数据库但是“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>';

我认为问题可能是因为我允许用户不填写所有信息，但我希望它会以这种方式让用户只输入重要字段。 我该如何解决这个问题？有人可以帮忙。

【参考方案1】：

当td 的数量与th 的数量不匹配时，或者当我使用colspan 时，它会给我这个错误...

根据您的 css，可能很难看到。我会在测试时为表格添加边框......

【讨论】：

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

请告诉我最后一个错误我该怎么办？

很难说……那个时候脚本要做什么？

现在它显示了除了添加的所有行

我将添加我的 php 文件

【参考方案2】：

从您的代码中，我看不到 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>'s/<td>'s 的数量相同。

错误的例子：

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

因此，即使<td> 和<tr> 的数量在html 上匹配，在DataTable 方法上配置更多列也会导致抛出此异常。在此示例中，从 DataTable 方法中删除 col 5 和 col 6 的配置行将修复错误。

【讨论】：

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

【参考方案3】：

一个简单的错误，表格标题有一列“没有标题，但表格本身不存在该列。我看不到它丢失（因为没有标题和边框）。

通过查看 datatable.js 中给出错误的行得到了帮助 - 暗示 tr 有问题，所以更仔细地查看我的表格而不是我的整体代码