javascript - 使用 jquery 忽略链接、复选框……在可编辑的 html 字段中

Question

很抱歉老是提问!!我有一个表格，显示我的数据库中的数据记录。为了让生活更轻松，我使用 jquery 使其可编辑，以便用户可以单击右侧的区域立即进行编辑，而无需重定向到不同的页面。 几个问题.. 我如何改进下面的代码，以便当单击带有复选框和链接的表格区域时，它不会响应/不可编辑？ 此外，编辑功能目前无法完全使用，我在尝试找出问题所在时遇到了问题。该表响应下面 jquery 中定义的所有内容，但不更新我的数据库。

有我的jquery代码edit.js

$(function() {
$('tbody').on('click','td',function() {
displayForm( $(this) );
});

});

function displayForm( cell ) {

var column = cell.attr('class'),
id = cell.closest('tr').attr('id'),
cellWidth = cell.css('width'),
prevContent = cell.text()

form = '<form action="javascript: this.preventDefault"><input type="text" name="newValue" value="'+prevContent+'" /><input type="hidden" name="id" value="'+id+'" />'+'<input type="hidden" name="column" value="'+column+'" /></form>';

cell.html(form).find('input[type=text]')
.focus()
.css('width',cellWidth);

cell.on('click', function(){return false});

cell.on('keydown',function(e) {
if (e.keyCode == 13) {//13 == enter
changeField(cell, prevContent);//update field
} else if (e.keyCode == 27) {//27 == escape
cell.text(prevContent);//revert to original value
cell.off('click'); //reactivate editing
}
});

}

function changeField( cell, prevContent ) {

cell.off('keydown');
var url = 'edit.php?edit&',
input = cell.find('form').serialize();

$.getJSON(url+input, function(data) {
if (data.success)
cell.html(data.value);
else {
alert("There was a problem updating the data.  Please try again.");
cell.html(prevContent);
}

});
cell.off('click');
}

在我的 edit.php 中有以下内容:

<?php
include ("common.php");

if (isset($_GET['edit'])){
$column = $_GET['column'];
$id = $_GET['id'];
$newValue = $_GET["newValue"];

$sql = 'UPDATE compliance_requirement SET $column = :value WHERE ComplianceID = :id';
$stmt = $dbh ->prepare($sql);
$stmt->bindParam(':value', $newValue);
$stmt->bindParam(':id', $id);
$response['success'] = $stmt->execute();
$response['value']=$newValue;

echo json_encode($response);
}?>

最后是我的 html..

<div class="compTable">
<table>
<thead><tr><th>Compliance Name</th><th>Compliance Goal</th><th>Compliance  Description</th><th>Opions</th><th>Invite</th></tr></thead>

<tbody>
<?php
$sql = 'SELECT * FROM compliance_requirement';
$results = $db->query($sql);
$rows = $results->fetchAll();

foreach ($rows as $row) {
echo '<tr id="'.$row['ComplianceID'].'">';
echo '<td class="crsDesc">'.$row['ComplianceName'].'</td>
<td >'.$row['ComplianceGoal'].'</td> 
<td >'.$row['ComplianceDescription'].'</td>
<td ><a href =inviteObstacle.php?action=invite&id=name1> InviteObstacle </a></td>
<td style="text-align: center; vertical-align: middle;"> <input type="checkbox" name="query_myTextEditBox">
</td>';
echo '</tr>';
}?>
</tbody>
</table>
</div>

非常感谢您的帮助。提前致谢

Answer 1

识别可编辑单元格的最简单解决方案是在您的 php 输出中为这些单元格提供 editable 类，然后将 td 选择器单击处理程序更改为

$('tbody').on('click','td.ditable',function() { 

至于更新数据库...需要确定是否正在发出来自$.getJSON 的ajax 请求。您可以在浏览器控制台网络选项卡中检查它。还要在控制台中查找错误。请求(如果发出)将显示状态、发送的内容、返回的内容等

需要以此为起点来帮助确定问题出在服务器代码(会获得 500 状态)还是浏览器代码中。

如果您从浏览器源 View 中提供实时 html 示例(不是 php)，则可以创建测试演示以查看您的 javascript 代码在做什么。将 html 和 javascript 放入 jsfiddle.net 并保存创建一个任何人都可以测试的演示