未捕获的错误：Tabledit 仅在应用于表时有效
Posted
技术标签:
【中文标题】未捕获的错误：Tabledit 仅在应用于表时有效【英文标题】：Uncaught Error: Tabledit only works when applied to a table 【发布时间】：2019-12-10 15:32:15 【问题描述】：我有一个从数据库正确填充的表，但是，当我尝试进行任何编辑时，会向我报告以下错误，这会阻止我完成对列的编辑。
jquery.tabledit.js:22 Uncaught Error: Tabledit only works when applied to a table.
我想编辑 choice 列中的值，如果您能查看我的代码并告诉我可能哪里出了问题，我将不胜感激。 p>
<?php
//StaffArea
/** Include the mysql connection */
require 'includes/connect.php';
$stmt = $conn->prepare(" SELECT * FROM `students` WHERE `choice` = 'NOSPORT' ");
$stmt->execute();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Untitled Document</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="jquery-tabledit/jquery.tabledit.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('#nstable').Tabledit(
url: 'example.php',
columns:
identifier: [0, 'id'],
editable: [6, 'choice']
,
onDraw: function ()
console.log('onDraw()');
,
onSuccess: function (data, textStatus, jqXHR)
console.log('onSuccess(data, textStatus, jqXHR)');
console.log(data);
console.log(textStatus);
console.log(jqXHR);
,
onFail: function (jqXHR, textStatus, errorThrown)
console.log('onFail(jqXHR, textStatus, errorThrown)');
console.log(jqXHR);
console.log(textStatus);
console.log(errorThrown);
,
onAlways: function ()
console.log('onAlways()');
,
onAjax: function (action, serialize)
console.log('onAjax(action, serialize)');
console.log(action);
console.log(serialize);
);
</script>
<style>
.table.user-select-none
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
</style>
</head>
<body>
<div class="container"></div>
<table class="table" id="nstable" style="border:1px solid red">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>StudentID</th>
<th>Year</th>
<th>Choice</th>
</tr>
</thead>
<tbody>
<?php while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) ?>
<tr>
<td><?php echo $row['id']; ?></td>
<td><?php echo $row['firstname']; ?></td>
<td><?php echo $row['lastname']; ?></td>
<td><?php echo $row['username']; ?></td>
<td><?php echo $row['studentid']; ?></td>
<td><?php echo $row['year']; ?></td>
<td><?php echo $row['choice']; ?></td>
</tr>
<?php ?>
</tbody>
</table>
</body>
</html>【问题讨论】：
我的回答可能有点过头了，您能否展示一下位于 example.php 中的代码。 prepare(" UPDATEstudents SET choice= '" . $input['choice'] . "' WHERE id='" . $input['id'] . "' "); $stmt->执行（）； 回声 json_encode($input); ?>
【参考方案1】：
欢迎来到 Stack Overflow。
看起来您正在尝试在文件上使用表格编辑，而您想要做的是直接在表格上使用它。应该是这样使用的。
$('#my-table').Tabledit(
columns:
identifier: [0, 'id'],
editable: [[1, 'First Name'], [2, 'Last Name']]
代码的 Ajax 部分在“保存”编辑后使用。将侦听器绑定到按钮，在侦听器中，您需要跟踪所有编辑的字段，以及当侦听器发现需要发送的更改时，即使用更改后的数据进行 ajax 调用时。
【讨论】：
谢谢克里斯，非常感谢您的帮助，但是，它仍然给我错误。此外，这直接取自 Tabledit 示例：markcell.github.io/jquery-tabledit/#examples ps 也得到 Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse () at showNeg.js:241 at XMLHttpRequest.onDefaultReadyStateChangeHandler【参考方案2】：解决这个问题的方法是在表格之后运行脚本。这样可以在 jquery 运行之前生成完整的表。
【讨论】：
【参考方案3】：首先你检查数据执行
打印
var_dump($stmt->fetch_assoc());
【讨论】：
嘿，感谢您的评论，该表是从数据库中的数据正确生成的，这让我相信 fetch(PDO:: FETCH_ASSOC)) 这段代码 sn-p 正在做它应该做的事情。以上是关于未捕获的错误：Tabledit 仅在应用于表时有效的主要内容，如果未能解决你的问题，请参考以下文章
KnockoutJS：模板未在可观察数组更改时更新（仅在添加时，在删除时有效）
Django 的 FilteredSelectMultiple 小部件仅在登录时有效
Google Apps 脚本文件上传（通过 HTML 表单）仅在脚本“绑定”时有效（测试独立脚本时，HTTP 403 错误）
Android 中的推送通知仅在 PhoneGap 应用程序在前台使用 node-pushnotifications 时有效