我是Jquery的新手，我希望一旦用户添加新行并在点击＆＃34; Ajouter＆＃34;之后提供重要信息。按钮它将添加到数据库，然后自动重新加载表。 一旦我运行，我发现数据成功添加到数据库然而＆＃34; tablebqup＆＃34;不再重新加载，我发现了这个错误：
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';
}
以下是包含的内容：＆＃34; tbbanqueupd.php＆＃34;：
<?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>';
我认为可能问题是因为我允许用户不填写所有信息，但我希望用户以这种方式输入重要字段。 我怎么能解决这个问题？有人可以帮忙。
答案 0 :(得分：4)
如果td的数量与th的数量不匹配，或者我使用colspan ...
根据你的css，可能很难看到。在测试时，我会在桌面上添加边框...
答案 1 :(得分：2)
从您的代码中，我看不到DataTabe初始化，通常将其放置在Document Ready函数中。所以：
示例：
$(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上<td>和<tr>的数量匹配，在DataTable方法上配置更多的列也会引发此异常。在此示例中，从DataTable方法中删除第5列和第6列的配置行将解决该错误。