忽略鏈接，複選框..在一個可編輯的HTML領域使用jquery

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

識別可編輯的細胞將被給予這些細胞的一類editable在你的PHP輸出，然後td單擊處理程序改變你的選擇，以

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

至於更新數據庫簡單的解決方案...需要以確定是否從$.getJSON發出ajax請求。您可以在瀏覽器控制檯網絡選項卡中檢查此內容。還要在控制檯中查找錯誤。請求（如果提出）將顯示狀態，發送的內容，返回的內容等。

需要使用它作爲起點以幫助確定preoblem是否位於服務器代碼（將獲得500狀態）或瀏覽器代碼中。

如果您從瀏覽器源視圖提供實時html樣本（而不是php），可以創建測試演示以查看您的JavaScript代碼正在執行的操作。將HTML和JavaScript放入jsfiddle.net並保存創建一個任何人都可以測試的演示