jQuery如何修复无法设置未定义的属性'_DT_CellIndex'？ [英] jQuery how to fix Cannot set property '_DT_CellIndex' of undefined?

问题描述

我是Jquery的新手，我希望一旦用户添加新行并提供重要信息，那么他单击 Ajouter按钮后就会添加到数据库中，然后自动重新加载表格。
运行后，我发现数据已成功添加到数据库，但是 tablebqup不再重新加载，并且我发现了此错误：

I'm new in Jquery and I want once the user adds new row and give the important information once he clicks on "Ajouter" button it will add on data base then reload the table automatically. Once i run that I found that the data added successfully to the database however "tablebqup" does not reload anymore and it I found this error :

Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined

的属性'_DT_CellIndex'，这里是添加新元素的函数：

Here is the function to add the new element:

    $("#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
            });
          }
       }
      });
  });

在我第一次运行它的过程中，它显示出类似以下内容：

In the fist time one i run it it showed something like this :

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

要解决该问题，我添加了适当的链接和脚本：

To solve it i added the appropriate link and script:

这样做的错误已变为：

Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined

令人惊讶的是对我来说，我已经使用了类似的逻辑，即：

What surprised me that i have used above similar logic I mean use the same:

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

一旦我单击另一个按钮只是以这种方式修改数据库信息：

and once I click another button just to modify information on data base in this way :

 $(".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();
        });
      }

在不添加这两个链接中的任何一个的情况下，完美的工作！！！

That work perfectly without adding any of this two links!!!

以下是错误的详细信息：

Here is the dtail of the error:

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：

and here is the included:"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>';

我认为可能是因为我不允许用户不填写所有信息，但是我希望用户以这种方式仅输入重要字段。
我该怎么解决？有人可以帮忙。

I thought that maybe the problem is because i allow the user to not filling all the informations, but i want that it gonna be in this way the user enters just the important field. How could I solve this problem?Can someone help.

推荐答案

当 td 与 th 的数量不匹配，或者当我使用 colspan ...

It gives me this error when the number of td doesnt match the number of th, or when I use colspan...

根据您的CSS，可能很难看到。我要在测试时在桌子上加边框...

Depending on your css, it could be hard to see. I'd add a border to the table while testing it out...

这篇关于jQuery如何修复无法设置未定义的属性'_DT_CellIndex'？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！